Tailwind布局问题：如何实现表格上方搜索栏的左右对齐布局

要实现你需要的布局，核心是利用Tailwind的Flex布局工具，只需两步修改即可达成：

1. 给包含搜索、筛选和按钮的父容器添加 flex items-center 类，让所有子元素处于同一行并垂直居中
2. 给“新建”按钮添加 ml-auto 类，该类会自动将按钮推到容器最右侧，左侧的搜索与筛选字段自然居左排列

修改后的代码示例：

<div class="flex items-center space-x-4 p-4">
  <!-- 搜索字段 -->
  <input type="text" placeholder="搜索内容" class="px-3 py-2 border border-gray-300 rounded-md">
  <!-- 筛选下拉框 -->
  <select class="px-3 py-2 border border-gray-300 rounded-md">
    <option value="">全部类别</option>
    <option value="1">类别1</option>
    <option value="2">类别2</option>
  </select>
  <!-- 新建按钮 -->
  <button class="ml-auto px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">新建</button>
</div>

补充说明： #

• space-x-4 用于控制左侧搜索和筛选字段的间距，可根据需求调整数值（如 space-x-2、space-x-6）
• 若需要适配小屏幕，可给父容器添加 flex-wrap 类，让元素在窄屏时自动换行
• items-center 保证所有元素垂直方向居中对齐，提升布局美观度

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