如何水平对齐含选择框与输入框的表单？inline-block尝试无效

针对你这个表单的水平对齐需求，下面给几个靠谱的实现方案，比单纯用inline-block更稳定：

方案1：Flexbox布局（推荐） #

Flexbox是现在做水平/垂直对齐最省心的方案，兼容性覆盖绝大多数现代浏览器。

先调整下HTML结构，把每个表单项拆成独立小组，结构更清晰：

<div class="container">
  <form class="horizontal" action="https://homirent.cloudbeds.com/#/" method="get">
    <div class="form-group">
      <label>City:</label>
      <select name="city">
        <option value="all">All Cities</option>
        <option>Cancún</option>
        <option>Ciudad De México</option>
        <option>Santiago De Querétaro</option>
      </select>
    </div>
    <div class="form-group">
      <label>Check-In:</label>
      <input type="text" name="check_in" placeholder="01/01/2023"/>
    </div>
    <div class="form-group">
      <label>Check-Out:</label>
      <input type="text" name="check_out" placeholder="02/01/2023"/>
    </div>
    <div class="form-group">
      <input type="submit" value="Search"/>
    </div>
  </form>
</div>

配套CSS：

.horizontal {
  display: flex;
  align-items: center; /* 垂直方向居中对齐 */
  gap: 16px; /* 表单项之间的间距，可按需调整 */
  padding: 10px;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 8px; /* 标签和控件之间的间距 */
}

/* 可选：给输入框/下拉框统一宽度，视觉更整齐 */
select, input[type="text"] {
  min-width: 180px;
}

方案2：CSS Grid布局 #

如果需要更规整的列对齐，Grid适合表单项数量固定的场景：

CSS代码：

.horizontal {
  display: grid;
  grid-template-columns: auto auto auto auto; /* 4列对应4个表单项 */
  align-items: center;
  gap: 16px;
  padding: 10px;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

方案3：修复inline-block的问题 #

如果坚持要用inline-block，需要解决两个核心问题：垂直对齐和HTML空格导致的间距：

先把原HTML里的文本（City:、Check-In:这些）改成<label>标签，语义化更好也方便控制样式，然后加CSS：

.horizontal .p1 {
  font-size: 0; /* 消除inline-block元素之间的空格间距 */
}

.horizontal label,
.horizontal select,
.horizontal input[type="text"],
.horizontal input[type="submit"] {
  display: inline-block;
  font-size: 16px; /* 恢复字体大小 */
  vertical-align: middle; /* 垂直居中对齐 */
  margin-right: 16px; /* 手动设置间距 */
}

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