display: flex 是表单项左右排列最稳的选择，父容器设 flex，子项（label+input）整体 flex 排列并统一 align-items: center；严格对齐多组时用 grid 更优，兼容 ie11 则回退 table 方案。
表单项左右排列时，display: flex 是最稳的选择
直接用 flex 布局控制表单项水平对齐，比浮动或 table-cell 更可靠，也避免了老式写法中 float 清除不干净、vertical-align 失效等常见问题。
关键点在于：父容器设 display: flex，子项（如 label + input 组合）用 flex: 1 或固定宽度；注意 input 默认是行内替换元素，高度可能和 label 不齐，需统一设置 align-items: center 或显式设 height/line-height。
- 不要把每个
input单独 flex —— 应该把「标签+输入框」作为一个整体单元再 flex 排列 - 避免给
input设float，否则容易脱离文档流，导致后续元素错位 - 如果表单项有必填星号或错误提示，建议用
span包裹并设margin-left: 4px，别靠空格或
form 内部用 grid 实现双栏对齐更可控
当需要严格对齐多组表单项（比如姓名左、年龄右；邮箱左、电话右），grid 比 flex 更适合二维约束。用 grid-template-columns: 1fr 1fr 划分两列，每组两个表单项按顺序填入即可。
注意：必须确保 DOM 顺序与视觉顺序一致，否则影响可访问性（screen reader 会按 HTML 顺序读）；另外 grid 在 IE 中不支持，若需兼容 IE11，得回退到 display: table 方案。
- 每组表单项应包裹在独立的
div里，作为 grid 的一个子项 - 避免跨行合并（
grid-row）—— 表单结构简单时没必要，反而增加维护成本 - 响应式断点建议加在
768px：小屏下改grid-template-columns: 1fr变单列
用 display: table 兼容老浏览器但语义弱
IE8–IE10 还没淘汰的场景下，display: table + table-cell 是少数能稳定实现左右对齐的方式，但它本质是“冒充表格”，对屏幕阅读器不友好，且无法响应式收缩。
写法上，外层 div 设 display: table; width: 100%，每个表单项组设 display: table-row，内部 label 和 input 分别设 display: table-cell 并配 vertical-align: middle。
- 不能在
table-cell内再嵌套 flex 或 grid，会破坏布局计算 -
width必须显式设（比如width: 120px），否则在 IE 下容易塌缩 - 所有
table-cell元素必须同级，不能用fieldset或额外div包裹打断结构
为什么不用 float 写双栏表单
float 在表单场景下几乎没优势：清除浮动容易漏（尤其动态插入表单项时），margin 计算易出错，zoom: 1 等 hack 已过时。现代项目里它只存在于遗留代码中。
典型翻车现场：label 浮动后，input 的 focus 边框被裁切；或者多个浮动项之间因空白符产生不可控间隙；又或者父容器忘记 overflow: hidden 导致高度塌陷。
- 即使强行用
float，也必须为每个浮动项设width，且总和不能超 100%（含边框/内边距） -
clear: both放错位置会导致整块表单换行，调试成本远高于换用 flex - 移动端 touch 区域识别不准，尤其在 iOS Safari 中点击
input会偶尔失焦
真正麻烦的是表单项之间的垂直节奏控制 —— label 字体大小、input 行高、错误提示行距，三者稍不一致就会让左右两栏看起来“错层”。这点常被忽略，但比布局方式本身更容易暴露在用户眼前。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
