如何用Tailwind CSS实现按钮与下拉框横向对齐？

直接按以下步骤修改代码即可实现横向对齐：

1. 给外层容器添加flex布局类，让子元素横向排列并垂直居中
2. 调整下拉框的宽度样式，避免独占整行
3. 移除不必要的边距

修改后的完整代码：

<div class="flex items-center gap-2 w-full">
  <%= form_for user_submission do |f| %>
    <select id="user_submission_status" name="user_submission[status]" class="flex-1 rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
      <option selected>Pending</option>
      <option>Approve</option>
      <option>Reject</option>
    </select> 
    <%= button_tag( :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 p-2.5 text-center inline-flex items-center me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800") do %>
      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
      </svg> 
    <% end %>
  <% end %>
</div>
</td>

关键改动说明： #

• 外层div新增flex和gap-2：flex开启横向布局，gap-2控制下拉框与按钮的间距，items-center确保两者垂直居中对齐
• 下拉框移除block w-full mt-2，新增flex-1：让下拉框自动填充容器剩余空间，不再独占整行，同时去掉多余的上边距
• 按钮保留原有样式即可，自身的inline-flex属性适配flex容器布局

内容的提问来源于stack exchange，提问作者user79193