label默认为inline元素，css禁止对其设置width/height；需改为display:block或inline-block，或在flex布局中用flex:0 0 120px控制宽度。
label 在左右结构布局中没有预设比例，它的宽度完全由 CSS 控制 —— 默认是 inline 元素，不响应 width，所以直接写 width: 120px 会无效。
为什么 label 不能直接设 width？
因为浏览器默认把 label 渲染为内联元素（display: inline），而内联元素的宽高不可控。你看到的“宽度”其实是文本内容撑开的，长度一变，整列就错位。
- 必须先加
display: block或display: inline-block才能设width - 若用
flex布局，label可以保持inline，但需在父容器里统一控制尺寸 - 设
display: flex后再给label加flex: 0 0 140px，比单纯width: 140px更稳 —— 它明确禁止伸缩，避免被长输入框或按钮挤变形
label 和 input 的常见宽高配比怎么定？
没有固定比例，但有经验阈值：标签文字越长，label 宽度越要留余量；输入框越矮，越需要 align-items: center 对齐基线。
- 常规表单（如用户名、邮箱）：
label推荐flex: 0 0 120px，input用flex: 1 - 高级搜索类（多行、多条件）：
label宽度按最长项定，比如"this exact phrase:"需要至少160px - 高度不一致时，别只调
line-height——input是替换元素，height和padding必须显式设，否则和label基线永远对不齐
用 Flex 实现左右对齐时 label 的 flex 值怎么选？
关键不是“比例”，而是行为控制：flex: 0 0 140px 表示“不增长、不缩小、基础宽度 140px”，这才是左右结构稳定的根源。
- 错用
flex: 1：label 会随容器拉宽，破坏左对齐 - 错用
flex: 0 1 140px：当空间不足时，label 可能被压缩，文字换行或截断 - 漏写
align-items: center：label 文字顶部对齐，input 框底部悬空，视觉上像没对齐 - 父容器没设
display: flex：所有子项 flex 设置全部失效，回归原始文档流
真正容易被忽略的是：label 的语义绑定（for 或嵌套）和视觉布局是两件事。你可以把 label 布局调得再整齐，如果没写 for="xxx" 或没把 input 套进去，点击文字还是不会聚焦 —— 这个逻辑错误在调试时几乎不报错，但用户感知极差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
