根本原因是布局维度选错：一维对齐用flex，二维对齐用grid，老项目才回退float或table；flex需包裹label+input整体设display:flex并加align-items:center；grid用grid-template-columns实现严格列对齐，移动端改1fr即可响应式切换。
多个表单元素排不齐、间距乱、小屏错位——根本原因不是写法“不够多”，而是没选对布局维度：一维对齐用 flex，二维对齐用 grid，老项目兜底才碰 float 或 display: table。
用 flex 排标签+输入框并排（最常用场景）
别把每个 label 和 input 单独设 flex，而是把它们包进一个 div，再给这个 div 设 display: flex：
-
label设flex: 0 0 120px（固定宽、不缩放、不增长），text-align: right+margin-right: 8px -
input、select、textarea统一设flex: 1，自动填满剩余空间 - 必须加
align-items: center，否则input默认 baseline 对齐，和label文字错位 - 避免给
input设height后忘记同步line-height，会导致光标偏上或偏下
用 grid 实现严格列对齐（多组并排/响应式切换）
当需要「姓名左、年龄右；邮箱左、电话右」这种两栏对齐，且 DOM 顺序必须与视觉一致时，grid 是唯一可靠选择：
- 父容器设
display: grid; grid-template-columns: 140px 1fr;，第一列固定标签宽，第二列自适应 - 每组
label+input放同一个div，该div就是 grid 的一个子项 - 移动端断点直接改
grid-template-columns: 1fr，无需改 HTML 结构 - IE11 不支持
grid？那就用display: table回退，但注意：legend必须存在，table-cell内不能嵌flex
为什么不能用 float 排表单
float 在表单里几乎全是坑：
- 动态插入新表单项时，漏写
clear: both就会塌陷，后续元素全乱 -
input是替换元素，float后高度计算不可靠，尤其在高缩放比或暗色模式下 - 无法响应式收缩：你设了
width: 200px，小屏下就溢出，而flex和grid天然支持1fr或flex: 1 -
float已被现代 CSS 布局方案全面替代，连 MDN 都标记为“legacy”
容易被忽略的语义与可访问性细节
再整齐的视觉对齐，如果丢了语义，对屏幕阅读器就是一堵墙：
-
label和input必须绑定：for="xxx"+id="xxx"，或用label包裹input；只写文字不绑定，点击无效 - 多选
radio组必须共用name，且每个都要配独立id和for - 分组用
fieldset+legend，不是为了加边框，而是告诉辅助技术“这是一组逻辑单元” -
legend不能display: none，要用position: absolute; left: -9999px隐藏，否则读屏器读不到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
