如何对齐Select元素与Button元素？对齐失败求助

嘿，我看你在对齐<select>和提交按钮的时候碰钉子了，咱们来搞定它！首先先看看你代码里的小问题，然后用Bootstrap自带的工具类轻松实现对齐～

第一步：清理冗余标签 #

你提供的代码末尾有多余的</td>"; </td>";，这会导致HTML结构错误，先把重复的那个去掉，避免布局被打乱。

第二步：用Bootstrap Flex工具类实现垂直对齐 #

既然你已经在用Bootstrap的form-select和btn组件，直接用它的Flex布局工具类就能完美对齐，不需要额外写复杂的CSS。核心思路是把<select>和按钮放在一个flex容器里，让它们垂直居中排列：

echo "
<form>
  <!-- 用这个div包裹需要对齐的元素 -->
  <div class='d-flex align-items-center gap-2'>
    <select class='form-select form-select-sm' id='tstatus' name='tstatus'>
      <option selected value='$status'>Status</option>
      <option value='Booked'>Booked</option>
      <option value='Ontrip'>On Trip</option>
      <option value='Cancelled'>Cancelled</option>
    </select>
    <input type='hidden' class='form-control' id='tid' name='tid' value='$id'>
    <input class='btn btn-primary' type='submit' name='thestatus' id='thestatus' value='Go'>
  </div>
</form>
</td>";

这里的几个关键类作用：

• d-flex：把容器变成flex布局，让子元素横向排列
• align-items-center：让子元素在垂直方向上居中对齐，这就是解决你对齐问题的核心
• gap-2：给元素之间添加一点间距，避免它们挤在一起，视觉上更美观

额外提示 #

如果你的页面没有加载Bootstrap的CSS，那上面的类就不会生效，记得确保Bootstrap资源已经正确引入哦。另外，检查整个HTML结构的完整性，确保所有标签都正确闭合，结构错误也可能导致布局异常。

内容的提问来源于stack exchange，提问作者Indu Bhusan Nath