最直接方式是每组label+input用div包裹并设display: flex和align-items: center；label设固定宽+right对齐；控件统一height或靠flex对齐；多组双栏优先用grid；移动端必须媒体查询断为垂直流。
用 display: flex 实现标签与输入框左右对齐
最直接、兼容性好（现代浏览器全覆盖）、不易出错的方式就是把每组「label + input」包裹进一个 div，然后给这个 div 设 display: flex 和 align-items: center。
常见错误是给 input 单独设 float 或 inline-block，结果 label 垂直对不齐、换行错乱、后续元素塌陷。
-
label建议设固定宽度（如width: 100px）+text-align: right，避免文字过长挤乱布局 -
input、select、textarea默认是替换元素，高度常和label不一致，必须统一设height或靠align-items: center对齐 - 别忘了
box-sizing: border-box，否则加padding或border后宽度超限
多组表单项严格对齐时优先选 display: grid
当需要「姓名左/年龄右」「邮箱左/电话右」这种两列严格对齐的双栏结构时，flex 容易因内容长度差异导致列宽不均；grid 更可控。
关键不是写得多，而是 DOM 结构要配合：每组表单项（含 label 和控件）必须是一个独立 div，作为 grid 的一个子项。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid+grid-template-columns: 1fr 1fr - 每个表单项
div按顺序填入，自动按两列流式排列 - IE11 不支持
grid，若需兼容，得回退到display: table方案，但语义性和可维护性会下降
移动端必须垂直堆叠，不能强行左右排
手机屏宽有限、手指操作精度低，任何试图在小屏上保持左右结构的 CSS（比如 flex 或 grid）都必须配合媒体查询断开 —— 否则会出现横向滚动、点击区域重叠、标签被截断等问题。
真正可靠的写法是：默认所有表单项垂直流式布局，再通过 @media 在 >=768px 时才启用左右结构。
- 每个表单项用
div.form-group包裹，display: block+width: 100% -
input、select等控件统一设width: 100%+box-sizing: border-box - 错误提示（如
.error-message）应绝对定位在对应.form-group内，并加aria-live="polite"
HTML 结构顺序决定 flex 排列方向
很多人调了半天 justify-content 发现按钮总在右边，其实问题出在 HTML 里：button 放在 input 后面，flex 就只能从左到右渲染。
比如搜索框想实现「按钮左、输入框右」，就必须让 button 标签出现在 input 标签之前。
- 不要依赖
order属性强行调序，它影响可访问性（screen reader 仍按源码顺序读） - 如果视觉顺序和逻辑顺序必须不同（极少数场景），请用
aria-labelledby显式关联 -
gap比margin更干净，但 IE 不支持，需 fallback 到margin
box-sizing 缺失导致的宽度溢出。这三处一出错，整个表单对齐就不可控。 
