如何让HTML表单的label与input左边缘对齐？

要匹配示例中的表单布局，让每行的Input左边缘对齐，这里提供两种实用的CSS解决方案：

方案1：Grid布局（无需修改HTML结构） #

利用CSS Grid的列定义，直接对现有HTML结构进行布局，无需调整DOM：

.form-group {
  display: grid;
  /* 定义6列：3个label列（自动宽度） + 3个input列（占剩余空间） */
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

/* 移除原生换行，由Grid控制行 */
.form-group br {
  display: none;
}

/* 第二行的label回到第一列起始位置 */
.form-group label:nth-of-type(4),
.form-group label:nth-of-type(5),
.form-group label:nth-of-type(6) {
  grid-column: 1;
}

方案2：Flex布局（需微调HTML结构） #

通过给每组label+input添加容器，用Flex实现更灵活的响应式布局：

修改后的HTML： #

<form action="#" method="#">
  <div class="form-group">
    <div class="field">
      <label for="fname">First Name: </label>
      <input type="text" name="firstName" id="fname">
    </div>
    <div class="field">
      <label for="mi">MI: </label>
      <input type="number" name="mi" id="mi" min="0" max="50">
    </div>
    <div class="field">
      <label for="lname">Last Name: </label>
      <input type="text" name="lastName" id="lname">
    </div>
    <div class="field">
      <label for="city">City: </label>
      <input type="text" name="city" id="city">
    </div>
    <div class="field">
      <label for="state">State: </label>
      <input type="text" name="state" id="state">
    </div>
    <div class="field">
      <label for="zcode">Zip Code: </label>
      <input type="text" name="zipcode" id="zcode">
    </div>
  </div>
</form>

对应CSS： #

.form-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.field {
  display: flex;
  align-items: center;
  width: calc(33.33% - 10px); /* 每行3个字段，抵消间距 */
}

.field label {
  flex: 0 0 85px; /* 固定label宽度，防止压缩 */
  text-align: right;
  margin-right: 5px;
}

.field input {
  flex: 1; /* 让input占满剩余空间 */
}

两种方案都能实现你要的对齐效果，Grid方案更适合不希望改动HTML的场景，Flex方案则在响应式调整上更灵活。

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