应优先用flex或grid布局：每组label+input需包裹在容器中，设display:flex并加align-items:center；label用flex:0 0 120px固定宽，input用flex:1自适应；避免table、float、inline-block等语义错误或响应式差的方案。
直接用 <table> 能快速对齐，但语义错误、响应式差；现代开发应优先用 display: flex 或 display: grid，它们才是可控、可维护的对齐方案。
label 和 input 怎么对齐才不偏移
常见错误是只靠视觉摆放，比如把 <label> 和 <input> 并列写在一行里，结果在 Chrome/Firefox 中 <label> 默认 baseline 对齐，看起来比输入框高一截。
- 必须用容器包裹每组，例如
<div class="form-row"><label>姓名</label><input type="text"></div> - 给容器设
display: flex，<label>设flex: 0 0 120px（固定宽度），<input>不设宽或加flex: 1 - 加
align-items: center消除垂直错位，比vertical-align: middle更可靠 - 避免用
float或inline-block—— 行高、字体、padding 微小差异就会导致对不齐
怎么让按钮右对齐又不破坏文档流
text-align: right 只对行内内容有效，对块级按钮无效；float: right 会脱离流、需清除，已过时。
- 父容器设
display: flex，再加justify-content: flex-end，按钮自动贴右 - 如果按钮是唯一子元素，更简单：给按钮本身加
margin-left: auto - 不要用
position: absolute+right: 0—— 容器高度塌陷、响应式下易重叠 - Grid 方案也行：
display: grid; justify-content: end，但 Flex 更轻量、兼容性更好（IE11+）
表格布局（<table>）什么时候能用
它确实“看起来”对齐最稳，但仅限于三类场景：内网后台系统、临时演示页、纯数据报表（无交互）。
立即学习“前端免费学习笔记（深入）”；
- 移动端几乎必然出问题：
<table>宽度超屏、iOS Safari 对width: 100%支持不稳定 - 若坚持用，至少包一层
<div style="overflow-x: auto">防止内容被切 -
<td>里别嵌<p>或额外<div>，会破坏默认垂直居中行为 - 语义上，表单不是表格数据，用
<table>违反 HTML5 规范，影响可访问性和 SEO
真正难的不是“让两个元素看起来在一条线上”，而是让它们在缩放 125%、换字体、开高对比度模式、切换暗色主题时依然对齐 —— 这点只有 Flex 和 Grid 能稳定做到，其他都是权宜之计。
