框架生成HTML下，如何纯用CSS实现不同列Label高度对齐？

完全可以通过CSS调整达到你要的效果，核心思路是利用flex布局的特性让所有label自动匹配最高高度，同时保证内容顶部对齐，不影响后续的输入框和错误提示元素。

解决方案代码 #

.row {
  display: flex;
  /* 让所有.field的高度保持一致 */
  align-items: stretch;
}

.field {
  display: flex;
  flex-direction: column;
  /* 给每个字段容器添加水平间距，可选 */
  margin: 0 12px;
}

.field > label {
  /* 让label占据字段容器内的可用垂直空间，自动匹配最高label的高度 */
  flex: 1;
  /* 保证label内的文本顶部对齐，避免拉伸导致居中 */
  display: flex;
  align-items: flex-start;
  /* 给label和输入框之间添加间距，提升可读性 */
  margin-bottom: 8px;
}

/* 可选：给错误提示添加样式区分 */
.field > span {
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 4px;
}

<div class="row">
  <div class="field">
    <label>Label</label>
    <input type="text">
  </div>
  <div class="field">
    <label>Label<br>over two lines</label>
    <input type="text">
  </div>
  <div class="field">
    <label>Label</label>
    <input type="text">
    <span>error</span>
  </div>
</div>

原理说明 #

• row容器的align-items: stretch会让所有子元素.field的高度统一，确保每个字段容器的垂直空间一致；
• .field > label设置flex: 1后，会占据.field内除输入框、错误提示外的所有垂直空间，自然会和最高的label高度同步；
• 给label添加display: flex; align-items: flex-start是为了让label内的文本始终顶部对齐，不会因为flex拉伸而跑到容器中间；
• 额外的间距和错误提示样式是为了优化视觉效果，可根据需求调整。

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