横向对齐失败的根本原因是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 专属语法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
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 容器里这个属性直接被忽略。
- 真正有效的解法：父容器（即每组
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 也救不回对齐逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
