label默认为inline元素，不响应width设置；需设display:block、inline-block或flex；推荐用flex布局配合for属性实现稳定对齐与响应式控制。
label 默认是 inline 元素，不能直接设 width
这是绝大多数人卡住的第一步：给 .label 写 width: 120px 没反应，因为浏览器默认把 label 当作内联元素（display: inline），它不响应宽高设置，只随内容伸缩。
必须显式改显示模式才能控制尺寸：
-
display: block—— 最常用，让 label 独占一行、支持width/height -
display: inline-block—— 适合和 input 并排但又需控宽的场景，注意默认有换行符导致的间隙 -
flex: 0 0 120px—— 在 flex 容器中更精准，避免受父级line-height或空白符干扰
别用 float: left 强行对齐——容易塌陷、难维护，现代项目里基本已被淘汰。
用 flex 布局统一 label + input 的垂直对齐
光设 label 宽度还不够，input 和 label 经常看起来“一高一低”，根源是它们默认基线（baseline）不同：input 对齐文字底部，label 按字体行高视觉居中。
立即学习“前端免费学习笔记（深入）”；
解决方法不是调 margin-top，而是用容器级对齐：
- 给每组
<div>加display: flex; align-items: center -
label设flex: 0 0 140px（不伸缩、不压缩、固定宽） -
input设flex: 1; min-width: 0（防小屏溢出） - 删掉所有
vertical-align，它在 flex 下无效且易冲突
这样无论字体大小、行高怎么变，label 文字和 input 框始终视觉居中对齐。
宽度值怎么定？别凭感觉估
设 width: 150px 很常见，但错在没验证——如果最长 label 是 “this exact word or phrase:”，在 10px Arial 下实测约 138px，150px 虽够用，但留余量太小，换字体或加 padding 就可能换行。
稳妥做法：
- 用浏览器开发者工具选中 label，看 computed width（含 padding/border）
- 取最长 label 的最大宽度，再加 10–16px 安全余量
- 响应式下用媒体查询降级：
@media (max-width: 480px) { .label { width: 100%; } } - 配合
box-sizing: border-box，确保padding不撑大实际占用空间
for 属性和嵌套写法影响布局行为
label 的两种绑定方式会间接改变布局表现：
- 嵌套写法：
<label>用户名：<input type="text"></label>—— label 包含 input，此时 label 是块级容器，display: block后 width 控制的是整个区域（含 input），不适合做左对齐布局 - for 写法：
<label for="user">用户名：</label><input id="user" type="text">—— label 和 input 是兄弟节点，可分别控制样式，是实现固定宽度+对齐的唯一推荐方式
嵌套写法虽能增大点击热区，但牺牲了布局自由度；for 写法配合 ID 绑定，语义清晰、样式可控、无障碍友好——复杂表单请坚持用 for。
真正难的不是设 width，而是 label 和 input 在不同字体、不同设备、不同缩放比例下保持稳定对齐。flex + for + 固定宽度组合看似简单，但每个参数都得实测，不能抄完就跑。
