html - 如何在没有换行符的情况下在左侧制作带有图标的按钮？

Question

使用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>

但是图标还是不可见。

Answer 1

您需要为 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>