如何制作左侧有图标且不换行的按钮？

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>

但结果图标根本被隐藏，我只看到取消按钮。如何修复它？

修改块： 我的 PhpStorm 显示提示 div 不允许在<button>标签内，所以我尝试用 span 换行，例如

<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>自身以减少元素数量。

这是代码的简化版本：

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