如何在没有换行符的情况下在左侧制作带有图标的按钮？
How to make button with icon at left side without line break?
使用 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 在
您需要为 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>
这是另一个示例：
来源：https://tailwindcomponents.com/component/button-with-icon
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center">
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span>Download</span>
</button>
使用 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 在
您需要为 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>
这是另一个示例：
来源：https://tailwindcomponents.com/component/button-with-icon
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<button class="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center">
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span>Download</span>
</button>