根本原因是label默认inline、input默认baseline对齐但基线不一致；最稳解法是统一设vertical-align: middle，并确保label和input都应用该属性，同时父容器line-height设为normal。
label 和 input 垂直对齐总偏高，怎么 fix
根本原因是 label 默认 inline、input 默认 baseline 对齐，但两者基线位置不一致——尤其在 Chrome/Firefox 中，label 文字的 baseline 实际比 input 的底边高 2–4px。
最稳解法不是调 margin-top，而是统一锚点：
- 给
label、input、select、textarea都加vertical-align: middle - 确保父容器（如
div.form-row）没设异常line-height，可显式写line-height: normal - 避免只给
input加vertical-align而漏掉label——单边设置无效
让所有 label 右对齐且宽度一致，该用什么 CSS
固定宽度 + 块级显示是唯一可控路径。inline 元素不能设 width，必须先改显示模式。
关键代码组合：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.form-row label {
display: block;
width: 120px;
text-align: right;
padding-right: 8px;
margin: 0;
}
-
width值按最长标签文本测出来（比如 “确认密码” vs “用户名”，建议取 120–150px） - 别用
float: right——它会让元素脱离文档流，后续 flex 或 grid 容器失效 - 移动端需配合
@media (max-width: 480px)把width改成100%，否则会横向溢出
flex 布局中 label 和 input 总是挤在一起，gap 不生效
gap 在 flex 容器中只对直接子元素有效，但如果你写了：
<div class="form-row"> <label>邮箱</label> <input type="email"> <span class="error">必填</span> </div>
那 .error 也会被算进 gap 计算，导致输入框被挤窄。
- 只让
label和input成为 flex 直接子元素，把辅助信息（如错误提示）用position: absolute或塞进input的after伪元素里 - 用
flex: 0 0 120px控制label，flex: 1给input，比单纯靠gap更可靠 - 加
min-width: 0到input上，防止 flex item 在小屏下因内容过长而撑破容器
表格布局（table / display: table）为什么在手机上崩了
表格本身不响应——width: 100% 在 iOS Safari 里常失效，table-layout: fixed 又会让中文换行被截断，这不是 bug，是规范行为。
- 真要用 table，外层必须包一层
<div style="overflow-x: auto">，否则小屏用户得左右拖拽才能看到完整表单 -
display: table系列属性在 IE8+ 虽兼容，但无法实现 label 点击聚焦 input 的语义化（for/id绑定在td里会失效） - 现代项目里，
display: grid写两行就能替代整个 table 结构：grid-template-columns: 120px 1fr+grid-column: 1 / 2，更轻、更语义、缩放稳定
真正难的不是“看起来对齐”，而是当用户调大浏览器 zoom、换用不同系统字体、或在折叠屏上横竖切换时，依然保持像素级对齐。这时候，flex 的 align-items: center 比 vertical-align: middle 更鲁棒，而 grid 的轨道定义比任何百分比或 calc 都更确定——但前提是，你得把每组 label+input 当作一个逻辑单元来包裹，而不是当成两个独立元素去硬调位置。
