结论：应优先使用 flex 或 grid 实现表单对齐，而非 table；flex 适合水平对齐与垂直居中，语义清晰、响应友好；grid 适合多字段严格列对齐；table 仅限内网或旧浏览器场景，存在语义退化、响应式失效及缩放错位等风险。
直接说结论：别用 table 做页面级布局，但可以用它快速对齐表单字段的 label 和 input——前提是接受语义退化、放弃响应式、且只跑在内网或旧浏览器里。
真正该优先选的是 flex 或 grid，它们对齐稳定、缩放可靠、代码量不比 table 多。
flex 实现 label 与 input 水平对齐（推荐）
flex 是当前最平衡的方案：语义清晰、缩放友好、移动端适配自然，还能顺便处理垂直居中。
- 把每组
label+input包进一个div，设为display: flex; align-items: center; -
label加width: 80px;（或用min-width防文字撑开），右对齐：text-align: right; -
input不设宽度，或统一用flex: 1;自适应剩余空间 - 避免给
label设display: block;后又忘了重置margin，否则会多出意外空白
常见错位现象：Chrome 下 label 看似对齐，实则 baseline 偏高
修复方式：加一行 label, input { vertical-align: middle; }，或直接用 flex 的 align-items: center 覆盖掉 baseline 计算逻辑
grid 实现固定列宽对齐（适合字段多、需严格控距场景）
grid 更适合需要列对齐一致性的表单，比如后台系统里带“必填标识”“校验提示”的长表单。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 父容器设
display: grid; grid-template-columns: 120px 1fr; - 每组用
grid-column: 1 / -1;控制跨行，或用grid-area显式命名区域 - 用
gap: 8px;替代margin，避免首尾间距不均 - 注意 IE11 不支持
grid，若需兼容，得 fallback 到flex，不能靠前缀硬撑
性能影响极小，但写法稍重：每个字段都要确保包裹结构一致，否则 grid-column 容易错位；也不建议嵌套 grid 做子对齐，容易失控。
为什么 table 在表单里“看起来能用”，但实际危险
table 对齐 label/input 是因为它天然按单元格基线排布，省去了手动调 vertical-align 的麻烦。
- 必须写
<label for="name"></label>+<input id="name">，否则键盘用户点不到 <td align="right"> 是快捷写法，但 CSS 中应优先用 <code>text-align: right- 移动端极易横向溢出：iOS Safari 对
table-layout: auto的宽度计算不可靠，文字一长就破框 - 真正难的不是“静态对齐”，而是“不同 zoom 级别下仍对齐”——
table做不到这点，flex和grid才是为弹性而生
别被“写得少”骗了。表面三行 table，背后要补的 media query、可访问性修复、缩放 hack，加起来远超一行 display: flex。
最后提醒一句：对齐问题从来不是“怎么让它看起来在中间”，而是“怎么让它在各种字体、各种缩放、各种屏幕宽度下，始终处于预期位置”。flex 和 grid 提供的是行为契约，table 只提供视觉快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
