Label 和 input 的对齐需解决语义、可访问性、响应式断点和浏览器渲染差异四层问题：必须显式关联（for/id 或嵌套）、避免 placeholder 替代 label、控制 label 宽度、外层容器加 min-width: 0、iOS Safari 下特殊处理原生控件。
Label 和 input 的视觉协作不是靠“看起来对齐”就完事的，而是要解决语义、可访问性、响应式断点和浏览器渲染差异这四层问题。直接套 flex 或 grid 容器不等于对齐成功——很多表单在 Safari 上错位、小屏下文字截断、点击区域失效，根源都在结构没理清。
label 和 input 必须显式关联，不能只靠视觉位置
常见错误现象：用户点击 label 文字没反应，或屏幕阅读器读不出字段含义。这是因为只写了 <label>用户名</label><input type="text">，没建立语义连接。
- 必须用
for属性配id：<label for="username">用户名</label><input id="username" type="text"> - 或者嵌套写法（更简洁但灵活性低）：
<label>用户名 <input type="text"></label> - 避免仅用
placeholder代替label——它不参与语义树，也不支持无障碍聚焦
水平对齐时 label 宽度必须可控，否则小屏必乱
使用 flex 布局做左右排列时，label 宽度失控是导致换行、挤压、文字溢出的主因。尤其当 label 文字长度不一（如“省” vs “收货人详细地址”），flex: 0 0 auto 会撑开整行。
- 给
label设固定基础宽度：flex: 0 0 100px，再配合min-width: 0防止 flex item 锁死 - 长 label 加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - input 侧用
flex: 1; min-width: 0;——这个min-width: 0在 iOS Safari 中尤其关键，否则 width: 100% 会被忽略
移动端优先的 grid 布局要防“多层 column 错位”
常见错误现象：display: grid 套了两层 grid-template-columns: 1fr 2fr，结果 label 和 input 分到不同格子，垂直高度不一致；或者用 display: contents 后，iOS Safari 渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 每个
<label>+<input></label>组合必须包裹在独立容器里（如<div class="form-row">），别让 grid 直接作用于 label/input 兄弟节点 <li>父 <code>form用display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))控制列数 - 每个
.form-row内部再用display: flex对齐，避免 grid 处理内联元素的不可控行为 - 所有原生控件外层都加
min-width: 0，防止 flex/grid 默认的min-width: auto导致宽度锁死 - 对
input[type="date"]：保留原生控件，只加width: 100%; min-width: 0; - 对
select：加-webkit-appearance: none;+ 自定义背景箭头，但必须保留padding-right（至少 32px），否则文字被截 - 所有
select/input[type="date"]外层都套一层<div> 并设 <code>min-width: 0真正难的不是让 label 和 input 在桌面端看着整齐，而是保证它们在 Safari 的各种缩放、横竖屏切换、辅助功能开启状态下，仍能保持语义正确、点击有效、宽度自适应。这些细节藏在
min-width: 0、for/id匹配、以及外层容器是否“多套了一层”里——漏掉任何一个，都可能在某个机型上突然崩掉。
iOS Safari 下原生控件的宽度陷阱
input[type="date"] 和 select 在 iOS 上对 width: 100% 响应极差，且 appearance: none 无法完全接管下拉箭头。强行 JS 模拟不仅体积大，还容易破坏 role="combobox" 的语义完整性。
