表单控件对齐问题根源在于浏览器修改HTML结构及baseline对齐机制；应统一vertical-align、禁用float、用flex或grid布局并重置默认样式，同时校验HTML结构合法性。
表单控件对齐问题，八成不是 CSS 没写对，而是浏览器悄悄改写了你写的 HTML 结构——label 和 input 在 DOM 中根本没按你预期的方式嵌套，后续样式自然失效。
为什么 label 和 input 总是“看起来”不对齐
这不是视觉误差，是 baseline 对齐机制在起作用：input 默认 vertical-align: baseline，而 label 作为内联文本容器，其基线位置由字体和行高决定，两者物理对齐点天然错开。用 margin-top 硬调会随字号、缩放、系统字体变化而偏移，不可靠。
- 别给
input单独设vertical-align，要统一设到所有表单控件：input、select、textarea、button - 确保父容器（比如
form或包裹div）没有意外的line-height干扰，显式写line-height: normal - 禁用
float布局表单——它会让元素脱离文档流，加剧对齐不可控
用 display: flex 包裹每组 label+input 最稳
这不是“让 input 跟 label 对齐”，而是把它们放进同一个弹性上下文里，由 align-items: center 统一控制交叉轴对齐基准。
- 每个表单字段用一个
<div class="form-row">包裹，里面放label和input - CSS 写：
.form-row { display: flex; align-items: center; gap: 0.5em; } -
label设flex: 0 0 80px（固定宽度防换行挤压），input设flex: 1; min-width: 0（防小屏溢出） - 避免混用
em和px定义尺寸——单位不一致会放大渲染误差
input 和 button 并排时底部下沉怎么办
典型现象：<input type="search"> 和 <button type="submit"> 并排后，按钮底边明显更低。这不是 bug，是 button 默认有 border、padding，某些浏览器还额外加了 line-height。
立即学习“前端免费学习笔记（深入）”；
- 统一重置：用
all: unset清除默认样式，再逐项设置border、padding、height - 显式设
height: 36px（或统一值），并配box-sizing: border-box - 禁用
vertical-align: baseline，强制vertical-align: middle或top - 若需响应式，用
clamp(32px, 4vh, 40px)控制高度，比纯px更健壮
Grid 布局适合复杂表单但容易踩坑
Grid 不是把 label 和 input 往格子里塞就行，关键在先定义轨道结构，再语义化落位。否则会出现跨行混乱、列宽崩塌、响应式断裂。
- 父容器设
display: grid; grid-template-columns: 120px 1fr;，明确两列轨道 - 每个
label加grid-column: 1，对应input加grid-column: 2 - 禁用
margin控距，改用row-gap和column-gap - 为
input、select等设min-width: 0，防止 flex/gird item 在窄屏下撑破容器
最常被忽略的一点：对齐问题往往在 DevTools 里看不出根源——你看到的是修正后的 DOM，不是你写的原始 HTML。务必用 W3C 校验器检查结构合法性，再看真实渲染树。结构错了，再精细的 CSS 都是徒劳。
