当内部内容倒置时，为什么按钮会稍微抬起？

Question

当测试下拉按钮和他们的内容(文本和雪佛龙图标)，一个与雪佛龙在左边得到轻微提升。

​

下面是代码：

<div class="mt-3">
    <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center" type="button">
        Dropdown button
        <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
    </button>
    <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center" type="button">
        <svg class="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
        Dropdown button
    </button>
</div>

如果把文字放在雪佛龙的左边，按钮就会因为某种原因被调平。

​

a
<svg ...></svg>
Dropdown button

另一方面，如果一个空置的<span>按钮被按下

​

<span></span>
<svg ...></svg>
Dropdown button

所以我真的不知道发生了什么。

我已经把下拉菜单和包装在一个div的所有东西，下拉菜单工作良好，一切，但按钮仍然关闭，有什么想法吗？

Answer 1

只需使用flex和item-center对齐两个下拉按钮。

​

<script src="https://cdn.tailwindcss.com"></script>
<div class="mt-3 flex flex-row items-center space-x-4">
    <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center" type="button">
        Dropdown button
        <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
    </button>
    <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center" type="button">
        <svg class="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
        Dropdown button
    </button>
</div>

​