label 和 input 对齐应统一设 vertical-align: middle；推荐用 flex 布局（容器 display: flex; align-items: center），避免 table 语义错误；注意重置默认样式、box-sizing 和移动端兼容性。
label 和 input 怎么对齐才不歪
默认情况下 label 和 input 常常上下错位、左右不对齐，根本原因是它们默认是 inline 元素，但垂直对齐方式（vertical-align）受字体行高、基线影响，且浏览器默认值不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
label和input同时加vertical-align: middle，比top或baseline更稳定 - 避免只给其中一个设
display: block——这会破坏行内布局，反而更难对齐 - 如果用了
font-size或line-height不同的全局样式，务必在表单区域重置或显式声明 - 移动端要注意
input[type="number"]在 iOS 上自带内边距和缩放行为，可能顶开label位置
用 flex 布局对齐表单控件靠谱吗
靠谱，而且是目前最可控的方式，尤其适合横向排列的 label+input 组合（比如登录表单的账号/密码行）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把每组
label+input包进一个<div>，对该容器设 <code>display: flex; align-items: center - 不要对
form整体设display: flex——子项会强行水平排布，破坏语义流和可访问性 - 注意
flex容器中input默认有min-width: auto，可能撑宽容器；加flex: 1或width: 0; min-width: 0可修复 - IE11 对
flex的align-items支持有 bug，若需兼容，改用margin-top: calc((height - line-height) / 2)这类兜底 <table> 确实能天然对齐，但语义错误：表单不是表格数据，屏幕阅读器会误读结构<li>如果真要用，至少把 <code>role="presentation"加到<table> 上，降低无障碍干扰<li> <code>colgroup+width属性比 CSS 控制列宽更稳定，尤其在动态内容长度差异大时- 现代框架（如 React）里混用
<table> 和条件渲染容易出错，<code>key错位、tr被意外包裹都会导致渲染异常为什么加了 margin/padding 还是对不齐
常见错觉：以为加点间距就能“看起来对齐”，实际是混淆了「视觉对齐」和「基线对齐」。很多问题出在盒模型叠加和用户代理样式未重置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器默认样式：Chrome 对
input[type="checkbox"]有margin-inline-start: 3px，Firefox 是2px，直接导致和文字错位 - 统一用
box-sizing: border-box，否则padding会让控件宽度不可控 - 避免用
margin-bottom拉开组间距——该用gap（flex/grid）或margin-block（现代流式布局） - 调试时打开开发者工具的「layout」面板，看 actual baseline 和 alignment-baseline 是否一致，比肉眼判断准得多
真正难的不是怎么对齐，而是对齐之后，在不同输入法、不同 zoom 级别、不同屏幕缩放比例下是否依然稳定——这些细节往往上线后才暴露。
- 检查浏览器默认样式：Chrome 对
table 布局还能用吗？为什么老项目还在用
能用，但仅限于必须严格对齐多行多列字段的老系统（比如后台数据录入页），不是“不能用”，而是“不该首选”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
