表单对齐本质是盒模型控制问题，需用flex布局、统一box-sizing、显式尺寸和vertical-align等综合解决，而非依赖text-align: justify。
表单控件本身不支持 text-align: justify，所谓“两端对齐”在表单中实际指的是标签与输入框视觉上左右撑满容器、文字与控件基线对齐、多行时末行也均匀分布——这不是靠文本对齐属性能解决的，得靠布局控制。
label 和 input 不在同一行？检查 display 和 vertical-align
默认情况下 label 是 inline 元素，input[type="text"] 是 inline-block，但它们的 vertical-align 默认值不同（label 是 baseline，input 是 middle），导致看起来错位。
- 统一设为
vertical-align: top或vertical-align: middle，推荐top更稳定 - 若 label 文字较长需换行，把
label设为display: inline-block; width: 120px（固定宽）或用flex分配空间 - 避免只给
input设width: 100%而 label 无约束，容易挤出容器
想让整组表单左右撑满父容器？用 flex 布局最可靠
传统 float 或 table 布局在响应式下易断裂，display: flex 是目前最可控的方式，尤其适合 label + control 组合。
- 给表单容器设
display: flex; flex-direction: column;，再为每组.form-row单独设display: flex; align-items: center; - label 设
flex: 0 0 120px（不缩放、最小宽 120px），input 设flex: 1自适应剩余空间 - 注意
textarea和select默认有 padding 和 border，要统一样式：重置box-sizing: border-box
多行文本（如 textarea）和单行 input 高度不一致？统一 line-height 和 padding
textarea 默认是可拉伸的块级元素，input[type="text"] 是内联替换元素，它们的行高计算逻辑不同，直接并排会出现高度割裂。
- 强制统一
height或min-height（比如都设为40px）比依赖line-height更稳妥 -
textarea要禁用拉伸：加resize: none，否则用户拖拽会破坏对齐 - 如果用了
font-size: 14px，建议padding: 8px 12px（上下各 8px = 行高 40px - 字号 14px - 边框 2px×2）
真正难的不是让两个元素“看起来对齐”，而是当 label 换行、input 获焦、屏幕缩放、字体加载延迟时仍保持稳定——这些细节在 flex + border-box + 显式尺寸组合下才不容易崩。别迷信 text-align，表单对齐本质是盒模型控制问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
