Label和Input不对齐的根本原因是基线对齐逻辑不一致，Flexbox需设display: flex并显式声明align-items: center；IE11需降级处理gap和flex属性；vertical-align因依赖行框基线而不可靠。
Label和Input总不对齐？Flexbox的align-items没设对
默认情况下，label是行内元素，input是替换元素，基线对齐逻辑不一致，视觉上必然错位。用Flexbox最直接的解法是把父容器设为display: flex，但光这样还不够——必须显式设置align-items: center，否则会按stretch（默认值）拉伸，导致label高度异常。
-
align-items: baseline看似合理，但input的基线位置浏览器实现不统一，Chrome和Firefox可能差2px - 如果
label含多行文字，align-items: center仍能保持垂直居中，而baseline会失效 - 别忘了给
label加margin-right或gap，否则紧贴input——推荐用gap: 8px（父容器设display: flex后生效）
响应式表单里Label换行了，Input却被挤到下一行
这是flex-wrap: nowrap（默认）遇上内容超宽的典型表现。Flex容器不会自动折行，label文字过长时，整个Flex项会被压缩甚至溢出。
- 给父容器加
flex-wrap: wrap，但注意：这会让label和input各自占一行，失去“同行”效果 - 更稳妥的做法是限制
label宽度：flex: 0 0 120px（不缩放、不增长、固定宽），再配overflow: hidden; text-overflow: ellipsis; white-space: nowrap - 如果必须支持长Label换行，改用
display: grid更可控，Flex在此场景本质是“同行对齐工具”，不是“布局引擎”
用了Flex，但IE11里完全失效
IE11对Flex的支持有硬伤：align-items在某些嵌套结构下计算错误，且不支持gap属性。如果你的项目仍需兼容IE11，不能只靠Flex兜底。
- 避免使用
flex: 1让input自适应——IE11里它常被忽略，改用flex: 1 1 auto并确保父容器有明确宽度 -
gap必须降级：用margin-right代替，并为最后一个子项加margin-right: 0（可用:last-child） - 测试重点不是“是否显示”，而是“是否对齐”——IE11里
input的边框和label文字底部经常差1px，微调padding-top比动align-items更可靠
为什么不用vertical-align而选Flex？
因为vertical-align只对行内元素和表格单元格有效，且作用对象是“行框内的基线”，不是容器的中心线。当input类型切换（比如type="checkbox" vs type="text"），基线位置突变，对齐就崩了。
立即学习“前端免费学习笔记（深入）”；
-
vertical-align: middle对checkbox基本无效，它实际对齐的是字母x的高度，不是控件本身 - Flex的
align-items: center始终以容器的交叉轴中心为基准，与子元素类型无关 - 现代框架（如React组件库）普遍采用Flex方案，不是因为“新”，而是因为
vertical-align在复杂表单中不可维护
真正难的不是写那几行Flex代码，而是想清楚：这个对齐需求到底属于“视觉微调”还是“结构约束”。前者用padding或transform更轻量，后者才值得上Flex——别让工具反客为主。
