如何实现两个文本框垂直对齐 纵向堆叠在同一水平位置

问题原因 #

默认行内流布局下，文本框属于行内替换元素，会顺着前方内联内容的位置依次排列，前方文本长度不一致时，文本框的起始水平位置自然会被挤到不同位置，无法上下对齐。

可直接复用的实现方案 #

方案1：固定标签宽度（兼容性最佳，支持所有浏览器） #

给每个表单项的说明标签设置统一固定宽度，所有输入框就会从同一水平位置开始排列：

<!-- 结构示例 -->
<div class="form-row">
  <span class="form-label">用户名：</span>
  <input type="text" class="form-input">
</div>
<div class="form-row">
  <span class="form-label">登录密码（8-16位）：</span>
  <input type="text" class="form-input">
</div>

.form-row {
  margin: 10px 0;
}
.form-label {
  display: inline-block;
  width: 140px; /* 按你最长的标签文本长度调整即可 */
  padding-right: 10px;
  text-align: right; /* 可选，标签右对齐视觉更整齐 */
}
.form-input {
  width: 220px;
  box-sizing: border-box;
  padding: 4px 6px;
}

方案2：Flex弹性布局（更灵活，无需手动计算标签宽度） #

用Flex布局实现表单项排列，不需要提前给标签设死宽度，适配性更强：

.form-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.form-label {
  flex-shrink: 0;
  padding-right: 10px;
  min-width: 100px; /* 可选设置最小宽度，避免标签过短排版凌乱 */
  text-align: right;
}
.form-input {
  width: 220px;
  box-sizing: border-box;
  padding: 4px 6px;
}

方案3：标签与输入框上下堆叠（完全垂直排布） #

如果不需要标签和输入框同一行，直接让标签、输入框各占一行即可，天然对齐：

.form-row {
  margin: 12px 0;
}
.form-label {
  display: block;
  margin-bottom: 4px;
}
.form-input {
  display: block;
  width: 220px;
  box-sizing: border-box;
  padding: 4px 6px;
}

注意事项 #

• 不要将输入框直接跟在零散文本后方，必须用容器把每一组「标签+输入框」包裹起来，避免受全局行内流影响
• 所有输入框统一设置box-sizing: border-box，避免内边距、边框撑大元素宽度导致对齐偏差
• 若使用固定标签宽度，宽度值要预留足够冗余，避免长标签文本换行打乱布局

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