最稳方案是用 display: flex 实现表单两栏，将 label+input 作为整体单元设父容器为 flex 并 align-items: center，label 固定宽，input 设 flex: 1 或 width: 100% 且同级包裹；多组并列字段用 grid 更可靠，外层 grid-template-columns: 1fr 1fr，子项为 label+input 包裹的 div；IE11 回退用 table，需 strict 结构；必加 overflow-wrap: break-word 防溢出；关键前提是每组表单项必须独立包裹。
直接用 display: flex 实现表单两栏（label + input 并排）最稳，别碰 float 或 table —— 它们在表单场景下容易错位、难对齐、响应式一改就崩。
用 display: flex 控制每组表单项水平对齐
关键不是让 input 单独 flex，而是把「label + input」当一个整体单元来 flex。
- 父容器（如
<div class="form-row">）设display: flex+align-items: center，保证文字和输入框垂直居中 -
label建议固定宽（如width: 80px），避免因文字长短导致每行 label 不对齐 -
input设flex: 1或width: 100%，但必须包裹在同级容器里，不能脱离该form-row - 若
input是type="number"或带清空按钮的现代控件，高度可能略高，统一加height: 36px+box-sizing: border-box更保险
用 display: grid 对齐多组并列字段（如姓名+电话、邮箱+部门）
当你需要严格控制两列字段的上下对齐（比如第一行左是“姓名”右是“电话”，第二行左是“邮箱”右是“部门”），grid 比 flex 更可靠。
- 外层容器设
display: grid+grid-template-columns: 1fr 1fr，间隙用gap: 0.5rem - 每组字段（
label+input）必须包在一个<div>里，这个div就是 grid 的一个子项 - 不要给子项设
width: 100%，grid 已经分配好列宽；设了反而可能导致内容溢出或换行 - 小屏断点（如
@media (max-width: 768px)）直接改成grid-template-columns: 1fr，自动变单列
兼容 IE11？回退到 display: table，但有硬约束
如果项目必须跑在 IE11，table 方案是少数能稳定对齐的，但它不是“写法问题”，而是结构限制。
立即学习“前端免费学习笔记（深入）”；
- 外层
<div style="display: table; width: 100%">，每个表单项组为<div style="display: table-row"> - 组内
label和input分别设display: table-cell+vertical-align: middle -
label必须显式设width（如width: 90px），否则 IE 下会塌缩 - 禁止在
table-cell内再嵌套flex或grid，会破坏渲染逻辑 - 所有
table-cell元素必须同级，不能被<fieldset>或额外<div>包裹
右侧内容超长时必加的两个 CSS 属性
无论用 flex 还是 grid，只要右栏是 input、textarea 或含长英文/数字的 span，不处理就会溢出容器。
-
word-break: break-word：强制在任意字符处换行（包括 URL、邮箱、长 token） -
overflow-wrap: break-word：更语义化的写法，效果相同，推荐优先用它 - 别用
white-space: normal—— 它只对空格生效，对无空格长串无效 - 如果用了
textarea，还要加resize: vertical防止横向拉伸破坏布局
真正容易被忽略的不是怎么写，而是「每组表单项是否独立包裹」——漏掉这一步，flex 的 align-items 和 grid 的列对齐都会失效；而一旦 DOM 结构错了，再多 CSS 也救不回来。
