横向对齐失败的根本原因是label和input未作为整体约束，label默认inline导致宽度不一而错位；应设display:block/inline-block或flex:0 0 120px，并用flex布局配合align-items:center统一高度，响应式下改column布局且label宽设100%。
横向对齐失败，根本不是 input 本身没对齐，而是你没把 label 和 input 当作一个整体来约束——它们各自在文档流里自由伸缩，自然错位。
为什么 label 宽度不一致就导致整行塌陷？
label 默认是 inline 元素，宽度随文字长度变化；一旦某条标签文字较长（比如“确认新密码” vs “昵称”），它就会撑开整行，后面所有 input 都被迫右移，视觉上就“歪了”。
- 别指望浏览器自动统一
label宽度——它不会 - 用
text-align: right+margin-right也不可靠：没有固定宽，右对齐只是“看起来差不多”，换字体、缩放页面就露馅 - 必须显式设
display: block或display: inline-block，再配width
flex 布局中 label 宽度怎么设才稳？
关键不是“设多宽”，而是“怎么设才不被 flex 拉伸或压缩”。直接写 width: 120px 在 flex 容器里可能失效，得用 flex 专属语法：
- 给
label设flex: 0 0 120px（不增长、不缩小、基础宽 120px） - 避免只写
width: 120px—— flex item 的width会被flex-shrink覆盖，小屏下反而缩成一团 - 最长标签文字建议用 px 测量（如中文 12px 字体下，“所属部门及岗位”约 136px），向上取整到 140px 或 150px，留出 padding 余量
input 总是比 label 高一截？vertical-align 不管用
这是 vertical-align: baseline 拉的锅——label 基线在文字底部，input 基线在框内文本底部，两者根本不在一条线上。改 vertical-align 只对 inline/inline-block 有效，而 flex 容器里这个属性直接被忽略。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 真正有效的解法：父容器（即每组
label+input的外层div）设display: flex; align-items: center - 删掉所有
vertical-align相关声明，它在 flex 里纯属干扰项 - 确保
input、select、textarea都有统一height或padding（比如height: 36px或padding: 8px 12px），否则高度不一致会放大错位感
响应式下双栏变单栏，label 宽度还硬撑着？
小屏强行保持 120px 宽度，会导致文字换行、输入框被挤出视口——这不是样式问题，是交互区域失效的开始。
- 在
@media (max-width: 768px)里把label宽度重置为flex: 0 0 100%或width: 100% - 同时把父容器
flex-direction改成column，让 label 在上、input 在下 - 别用
min-width锁死 label，它会阻止 flex 自适应，小屏下反而更卡
最常被忽略的一点：DOM 结构必须是 <div class="form-row"><label>...</label><input></div>。把 label 和 input 拆到不同 div 里，再强的 CSS 也救不回对齐逻辑。
