因为label默认是内联元素（display: inline），不支持设置宽高、上下margin或padding，width属性被忽略；必须设display: block或inline-block才能生效，并配合flex布局实现label与input的精准对齐。
为什么直接给 label 设 width 没用
因为 label 默认是内联元素（display: inline），不支持设置宽高、上下 margin 或 padding。你写 width: 120px 完全被忽略，浏览器会按文本内容撑开宽度——这也是表单里“用户名：”和“确认密码：”长度不同、导致输入框错位的根源。
display: block 是最稳妥的启用方式
只需一行 CSS 就能让 label 表现为块级元素：独占一行、支持 width/height、可设上下边距。没有兼容性问题，所有现代浏览器包括 IE8+ 都支持。
- 必须加
display: block，不能只靠float或position: absolute替代——后者会让元素脱离文档流，影响后续布局和可访问性 - 如果 label 需要和 input 并排（比如水平表单），建议改用
display: inline-block，但要注意换行符产生的空白间隙 - 配合
box-sizing: border-box更安全，避免padding或border撑大实际宽度
搭配 flex 布局才能真正对齐 input
光把 label 变成块级还不够。若父容器仍是默认流，label 和 input 会垂直方向“基线不对齐”，尤其当 label 文本多行或 font-size 不一致时。
- 推荐给每组表单项的父
<div>加display: flex和align-items: center -
label用flex: 0 0 140px固定宽度（比最长标签略宽），input用flex: 1自适应剩余空间 - 避免用
vertical-align: middle配合inline-block——它依赖行高计算，在不同字体/缩放下容易偏移
固定宽度值怎么选才不踩坑
宽度不是越大越好。设太宽浪费空间，设太窄会截断文本或触发换行，破坏对齐效果。
立即学习“前端免费学习笔记（深入）”；
- 先收集所有 label 文本，找出最长的一条（比如 “this exact word or phrase:”），用浏览器开发者工具测其渲染宽度
- 在该宽度基础上 +10~16px 作为最终
width，留出padding和字符间距余量 - 别用
min-width代替width——它无法约束所有 label 的横向尺寸一致性，对齐依然会失效
display: block 就停手，结果发现 input 还是高低不平——问题往往出在没处理好父子级的 display 协同。 
