表单标签与输入框对不齐的本质是默认样式差异和盒模型行为不一致，应采用“列对齐”思路，通过 grid 或 flex 布局统一结构并配合基础样式重置实现精准对齐。
表单标签（label）和输入框（input、select、textarea）对不齐，本质是默认样式差异和盒模型行为不一致导致的。用“列对齐”思路统一结构，比零散调 margin 或 vertical-align 更稳定可靠。
用 display: grid 布局实现精准列对齐
Grid 天然适合表单的二维结构：左列放 label，右列放控件。一行一字段，语义清晰，对齐零误差。
- 给表单容器设
display: grid，定义两列：grid-template-columns: 120px 1fr（标签宽固定，输入框自适应） - 每个
label和对应input包在同一个div.form-row里，不拆开 - 用
grid-column: 1和grid-column: 2显式控制位置，避免依赖文档流顺序
保持所有控件基线一致的关键细节
即使用了 Grid，如果 input、select、textarea 默认行高、字体大小、内边距不同，视觉上仍会“浮起来”。需统一基础样式：
- 设置统一
font-family、font-size（如14px）、line-height（推荐1.4） - 重置
input、select、textarea的padding和border，例如都设为padding: 8px 12px - 给
textarea加vertical-align: top，避免默认 baseline 对齐造成的错位
响应式场景下用 minmax() 自适应列宽
小屏幕时固定标签宽度会挤占空间。改用弹性列定义更实用：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: minmax(80px, 120px) 1fr—— 标签最小 80px，最大不超过 120px - 搭配
@media (max-width: 480px)切换为单列：grid-template-columns: 1fr，label 在上、控件在下 - 这样既保证桌面端左右对齐，又兼顾移动端可读性
不用 Grid？Flex + 语义化结构也能稳住
若需兼容老浏览器，可用 Flex 替代，但必须配合结构优化：
- 每个字段用
<div class="form-group"> <label>姓名</label><input> </div>封装 .form-group { display: flex; align-items: center; gap: 12px; }- 给
label设固定min-width（如min-width: 80px），避免文字长短影响对齐 - 对
textarea单独加align-self: flex-start防止高度拉伸后 label 下沉
不复杂但容易忽略：对齐问题从来不是单点样式能解决的，而是结构 + 样式 + 属性三者协同的结果。列对齐的本质，是把表单当成有行列关系的数据表格来组织，而不是一堆浮动元素去碰运气。
