label 默认为 inline 元素，width 等属性无效，其宽度由内容自然撑开；真正可控的自适应需通过父容器 flex 或 grid 布局统一控制，如 label 设 flex: 0 0 auto、input 设 flex: 1。
label 默认是内联元素，不能直接设 width；所谓“自适应宽度”，实际是指它**随内容自然伸缩**——这不是 bug，而是正确行为。要让它“看起来自适应又整齐”，关键不是强行控制单个 label，而是统一其父级布局逻辑。
为什么直接给 label 设 width 失效？
因为 label 默认是 display: inline，此时 width、height、margin-top/bottom 全部被忽略。你看到的“宽度”其实是文字盒（content box）撑出来的，没有样式干预空间。
- 检查浏览器开发者工具里 computed 样式，
width会显示为auto，且不可修改 - 加
display: inline-block后可设width，但若内容超宽仍会撑开——这不是“自适应”，是“溢出” - 用
flex或grid布局时，label的“自适应”本质是容器分配剩余空间的结果，不是它自身在计算
真正可控的自适应：用 flex 布局约束 label + input 组合
多数场景下你要的不是单个 label 自适应，而是整行表单中 label 和 input 协同响应内容变化。推荐用 display: flex 父容器 + 明确子项行为：
- 给包裹
label和input的<div>加display: flex和align-items: center -
label设flex: 0 0 auto（不伸缩、不压缩、按内容宽） -
input设flex: 1，自动填满剩余空间 - 如果 label 文本过长想折行，加
white-space: normal; max-width: 200px;（注意：必须配合display: block或inline-block才生效）
避免踩坑：不要用 float / table / width: fit-content
float 已淘汰，table 布局语义错乱，width: fit-content 在 Safari 旧版本和部分安卓 WebView 中支持不稳——尤其当 label 包含富文本或动态插入 HTML 时，fit-content 可能算错尺寸，导致换行错位或父容器塌陷。
立即学习“前端免费学习笔记（深入）”；
- 测试发现：Chrome 128+ 支持良好，但 iOS 16.6 Safari 对
fit-content在inline元素上仍返回auto - 更稳妥的做法是用
min-content配合max-width，例如：width: min-content; max-width: 100%; - 若 label 内含
<span>或图标，记得重置vertical-align，否则基线对不齐
最易被忽略的一点：所谓“自适应”，往往不是靠 label 自己动，而是靠它所在的上下文——父容器是否设了 width、是否启用 flex 或 grid、是否处理了 box-sizing 和 white-space。单独调一个 label 的样式，90% 的时候是在治标。
