如何实现表单字段统一对齐，不受标签宽度影响？

需求：让所有表单输入框（含下拉选框）按照目标UI对齐，无论标签长短，输入框始终右侧对齐，且无需为88个字段单独设置样式。

当前效果与目标效果 #

• 当前UI：
  
• 目标UI：
  

当前代码 #

CSS #

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  background-color: white;
}

.locate__dropdown {
  margin-top: 3em;
  margin-left: 1em;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-weight: 700;
  border-bottom: 1px solid black;
  margin-bottom: 1em;
}

.locate__open {
  margin-bottom: 5em;
  margin-left: 1em;
}

#locateForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

input {
  height: 2em;
  width: 12em;
  border: 1px solid gray;
  border-radius: 6px;
  margin-bottom: 5em;
}

HTML #

<section id="locate">
  <div class="locate__dropdown">
    <img src="down-arrow.png" alt="">Locate
  </div>

  <div class="locate__open">
    <form action="#" id="locateForm">
      <label>
          Locate Ticket #
          <input type="text" name="ticketNum" id="ticketNum">
        </label>

      <label>Predecessor
          <input type="text" name="predecessor" id="predecessor">
        </label>

      <label>
          Ticket Status
          <select id="ticketStatus" name="ticketStatus">
            <option value=""></option>
            <option value="correction">Correction</option>
            <option value="original">Original</option>
            <option value="relocate">Relocate</option>
            <option value="update">Update</option>
          </select>
        </label>

    </form>
  </div>
</section>

修改后的代码（实现对齐） #

CSS #

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box; /* 避免padding/margin影响布局尺寸 */
}

body {
  background-color: white;
}

.locate__dropdown {
  margin-top: 3em;
  margin-left: 1em;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-weight: 700;
  border-bottom: 1px solid black;
  margin-bottom: 1em;
}

.locate__open {
  margin-bottom: 5em;
  margin-left: 1em;
}

#locateForm {
  display: grid; /* 改用Grid布局实现列对齐 */
  grid-template-columns: auto 1fr; /* 第一列自适应标签宽度，第二列占剩余空间 */
  gap: 0.5em 1em; /* 控制行列间距 */
  align-items: center; /* 垂直居中对齐元素 */
}

/* 统一输入框与下拉选框样式 */
input, select {
  height: 2em;
  width: 12em;
  border: 1px solid gray;
  border-radius: 6px;
}

label {
  margin-bottom: 5em; /* 保留原有的垂直间距 */
}

HTML（无需修改） #

<section id="locate">
  <div class="locate__dropdown">
    <img src="down-arrow.png" alt="">Locate
  </div>

  <div class="locate__open">
    <form action="#" id="locateForm">
      <label>
          Locate Ticket #
          <input type="text" name="ticketNum" id="ticketNum">
        </label>

      <label>Predecessor
          <input type="text" name="predecessor" id="predecessor">
        </label>

      <label>
          Ticket Status
          <select id="ticketStatus" name="ticketStatus">
            <option value=""></option>
            <option value="correction">Correction</option>
            <option value="original">Original</option>
            <option value="relocate">Relocate</option>
            <option value="update">Update</option>
          </select>
        </label>

    </form>
  </div>
</section>

实现说明 #

1. 用Grid布局替代Flex垂直布局，grid-template-columns: auto 1fr让所有标签自动归到第一列、输入框归到第二列，天然实现对齐效果，无需单独设置每个字段的外边距。
2. 统一input和select的样式，避免下拉选框与输入框视觉不一致。
3. 添加box-sizing: border-box确保元素尺寸计算更直观，不会因内边距或边框打乱布局。

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