label和input垂直不对齐主因是label默认为inline元素，无法设置width/height，需先设display:block激活尺寸控制；推荐统一设display:block;width:120px;margin-right:8px，并将每组label+input作为整体用grid或flex布局。
label 和 input 垂直对齐不齐，是因为没转成块级元素
默认 label 是 inline 元素，不能设 width 或 height，直接加 width: 120px 无效，导致“用户名”和“邮箱”两个 label 宽度不一，input 就没法纵向对齐。
必须先用 display: block 或 display: inline-block 激活尺寸控制能力。更推荐 display: block，语义清晰、无换行间隙问题。
- 给所有
label统一加display: block; width: 120px;（宽度按最长 label 文本向上取整） - 同时设
margin-right: 8px;，为右侧input留出视觉呼吸感 - 避免只设
width却漏掉display—— 这是新手最常踩的坑，样式写了但完全不生效
两栏并排时，别单独 flex 每个 input
想让“姓名”“年龄”两组横向并排，常见错误是给每个 input 单独设 display: flex，结果 DOM 结构散乱、对齐基准错位。
正确做法是：把「每组 label + input」当一个整体单元，再用父容器控制排列。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 外层用
display: grid; grid-template-columns: 1fr 1fr;，两列等宽 - 每组写成
<div class="form-row"><label>姓名</label><input></div>，整体塞进 grid 单元格 - 如果要兼容 IE11，改用
display: table;+display: table-cell;，但需确保表单语义不被破坏
flex 实现左右对齐时，align-items: center 不够用
只加 align-items: center 可能仍看到 label 文字偏上、input 边框线略低——因为 input 是替换元素，默认基线（baseline）和文字不一致。
真正稳的垂直居中方案是显式约束高度与对齐方式：
- 给父容器加
height: 40px;（或统一行高），再配align-items: center; - 或者统一设
line-height: 40px;+padding: 0;在label上，让文字垂直居中 - input 必须加
box-sizing: border-box;，否则padding会让实际高度超出预期
响应式断点下 label 宽度失效怎么办
在小屏（如 @media (max-width: 480px)）里还死守 width: 120px，会导致 label 溢出或挤压 input，甚至触发横向滚动条。
应对策略不是删样式，而是分层覆盖：
- 桌面端保持
display: flex+ 固定 label 宽度 - 小屏切到
flex-direction: column;，label 自然占满一行，width不再需要 - 若仍需左右结构（比如平板），改用
grid-template-columns: 120px 1fr;而非百分比，避免计算误差
label 宽度值永远要基于真实文本长度测量，别凭感觉写 100px —— “确认密码”比“用户名”长 3 个字符，这点差异在多行表单里会逐级放大。
