如何实现标签与输入框对齐、列宽适配最长标签的响应式表单

你当前用固定宽度标签+Flex换行的方案，会强制所有标签占70px宽度，短标签旁会产生冗余空白；同时Flex换行后每行元素独立渲染，无法让同列元素共享宽度规则。改用CSS Grid布局可以直接实现需求，不需要额外JS处理。

修正后代码 #

CSS部分 #

.content {
  border: 1px solid grey;
  padding: 10px;
}
.form-wrapper {
  display: grid;
  /* 自动适配列数，列宽随内容自适应，窄屏自动换行 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 20px;
  row-gap: 12px;
}
.field-wrapper {
  display: grid;
  /* 标签宽度自适应内容，输入框占满剩余空间 */
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
}
.input-label {
  /* 移除固定宽度，禁止标签换行 */
  white-space: nowrap;
}
input {
  /* 输入框宽度自适应容器，避免溢出 */
  width: 100%;
  box-sizing: border-box;
}

HTML部分 #

原有HTML结构无需调整，注意<input>是自闭合标签，不需要额外写</input>闭合，修正后结构如下：

<div class="content">
  <div class="form-wrapper">
    <div class="field-wrapper">
      <label class="input-label">Name</label>
      <input>
    </div>
    <div class="field-wrapper">
      <label class="input-label">Address</label>
      <input>
    </div>
    <div class="field-wrapper">
      <label class="input-label">Nationality</label>
      <input>
    </div>
    <div class="field-wrapper">
      <label class="input-label">Relationship</label>
      <input>
    </div>
    <div class="field-wrapper">
      <label class="input-label">Age</label>
      <input>
    </div>
    <div class="field-wrapper">
      <label class="input-label">Gender</label>
      <input>
    </div>
  </div>
</div>

注：原代码里Relatsionship为拼写错误，已修正为正确的Relationship

效果特性 #

• 同列标签自动对齐：每列标签宽度自动适配该列最长标签的宽度，短标签旁无冗余空白
• 同列输入框自动对齐：输入框统一从标签右侧开始排布，左边缘完全对齐
• 响应式适配：视口宽度变化时自动增减列数，每列宽度独立计算，不会被其他列的长标签撑宽
• 无硬编码宽度：后续新增/修改标签文字长度时，不需要手动调整CSS宽度值

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