如何实现输入框水平对齐：仅标签换行，输入框不换行

嘿，我懂你要的这种表单布局效果——label能根据容器宽度自动换行，但所有输入框必须整整齐齐对齐，绝不换行。之前用列表加white-space的方式确实容易踩坑，咱们换个更靠谱的布局方案来解决。

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

Flexbox能轻松实现“label占满剩余空间、input固定位置”的需求，代码简洁且兼容性好：

#container { 
  background-color: rgb(229, 229, 229);
  padding: 1rem;
}
#lcontainer { 
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#lcontainer li {
  display: flex;
  align-items: flex-start; /* 让input和label顶部对齐，换成center可实现垂直居中 */
  gap: 0.5rem; /* label与input的间距，可按需调整 */
  margin-bottom: 0.8rem; /* 列表项之间的间距 */
}
#lcontainer li label {
  flex: 1; /* 让label占据input之外的所有可用空间 */
  word-wrap: break-word; /* 确保label文字自动换行 */
}
#lcontainer li input {
  flex-shrink: 0; /* 禁止input被压缩，保证宽度稳定且不换行 */
  min-width: 180px; /* 给input设置最小宽度，避免过窄 */
}

HTML保持你原来的结构即可，无需修改：

<div id="container">
  <ul id="lcontainer">
    <li>
      <label>some text</label>
      <input>
    </li>
    <li>
      <label>some bigger text that will wrap when container is narrow</label>
      <input>
    </li>
    <li>
      <label>some bigger bigger text that needs multiple lines to display</label>
      <input>
    </li>
    <li>
      <label>some smaller one</label>
      <input>
    </li>
  </ul>
</div>

方案2：Grid布局 #

如果你更喜欢Grid布局，也能实现完全一致的效果：

#container { 
  background-color: rgb(229, 229, 229);
  padding: 1rem;
}
#lcontainer { 
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#lcontainer li {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占剩余空间，第二列适配input宽度 */
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
#lcontainer li label {
  word-wrap: break-word;
}
#lcontainer li input {
  min-width: 180px;
}

为什么原来的方法会失效？ #

你之前给li设置white-space: nowrap，会强制整行内容不换行，容器过窄时内容会直接溢出；如果去掉这个属性，inline-block的input又会因为空间不足被挤到下一行。而Flex/Grid布局能明确划分label和input的空间，确保input始终固定在右侧，不会被挤换行，同时让label自动适应剩余空间换行。

这样调整后，不管容器宽度怎么变化，label都会自动换行适配空间，所有input都会整齐排列在右侧，绝对不会换行～

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