使用tailwindcss,我在左侧制作了带有图标的按钮,但是我得到了那个图标和按钮在不同的行上,为了修复它,我用flex items-start justify-between
包裹了这两个元素类:
<div class="flex">
<button type="submit" class="bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto">
<div class="flex items-start justify-between" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z" clip-rule="evenodd" />
</svg>
Cancel
</div>
</button>
但结果图标完全隐藏,我只看到取消按钮。 如何解决?
修改版 block :
我的 PhpStorm 显示提示 <button>
中不允许使用 div标签,所以我尝试包装
有跨度,比如
<button type="submit" class="bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto">
<span class=" flex items-start justify-start">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z"
clip-rule="evenodd"/>
</svg>
</span>
<span>
Cancel
</span>
</span>
</button>
但是图标还是不可见。
最佳答案
您需要为 SVG 图标设置宽度。您也可以移动 flex
到 <button>
的类(class)本身来减少元素的数量。
这是您的代码的简化版本:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<button type="submit" class="flex items-center bg-gray-500 text-white hover:bg-purple-500 p-2 rounded text-sm w-auto">
<svg class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z" clip-rule="evenodd" />
</svg>
<span>Cancel</span>
</button>
关于html - 如何在没有换行符的情况下在左侧制作带有图标的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66134112/