label与input默认不对齐的根本原因是浏览器将label当文本流、input当替换元素处理，基线不同；最可靠解法是用flex布局，每组label+input单独包裹于display:flex且align-items:center的容器中。
label 默认不对齐的根本原因
不是标签没写对，是浏览器默认把 <label></label> 当文本流处理、把 <input> 当替换元素（replaced element）处理，两者基线（baseline）不同。哪怕你写了 display: inline-block，vertical-align 默认值仍是 baseline，结果就是“看起来错位”。常见现象：label 文字底部和 input 框底边不在一条线上，尤其混用 <select></select> 或 <textarea></textarea> 时更明显。
用 flex 布局包裹每组 label+input
这是目前最可控、响应式友好、语义清晰的做法。关键不是全局设样式，而是把每一对 <label></label> 和 <input> 包进独立的容器里：
- 给每个表单行加一个
<div class="form-row"> 容器 <li>CSS 中设 <code>.form-row { display: flex; align-items: center; gap: 0.5em; } -
<label></label>设固定宽度：flex: 0 0 120px;（避免文字长时挤压 input） -
<input>、<select></select>等设flex: 1; min-width: 0;（防止小屏下溢出）
注意：不要给整个 <form></form> 设 display: flex，否则所有子元素会强行排成一行，破坏语义结构。
为什么不用 float 或 text-align 靠左
float: left 会让元素脱离文档流，容易导致父容器塌陷，且 clear 处理麻烦；text-align: left 对块级 <label></label> 无效，除非你同时设 display: inline-block 并显式控制 vertical-align —— 但这样每组都要重复写，维护成本高。更严重的是，一旦加入 <textarea></textarea> 或带图标的输入框，vertical-align: middle 可能仍无法对齐顶部或底部，而 flex 的 align-items 是真正作用于交叉轴的，不依赖基线计算。
兼容性与移动端要注意的点
Flexbox 在 iOS Safari 10.3+、Chrome 49+、Firefox 48+ 全面支持，旧版 Android WebView（如 4.4）需加 -webkit- 前缀。另外，iOS 上 <input type="date"> 或 <select></select> 的原生控件高度不一致，建议统一加 height: 36px; 和 box-sizing: border-box;。如果用了 UI 框架（如 Bootstrap），务必检查它是否重置了 form-row 类或覆盖了 flex 行为 —— 最快验证方式是打开 DevTools，看 computed styles 里 display 和 align-items 是否生效。
style 都可能悄悄覆盖你的 flex 设置。调不准时，先看 computed styles，再一层层往上查继承链。
