input和button同排错位是因baseline与vertical-align默认行为差异；需统一font-size、box-sizing，设inline-block+vertical-align:middle，或更优解：flex布局align-items:center。
输入框（input）和按钮（button）在同一行却上下错位？这不是你漏写了样式，而是浏览器默认渲染行为在起作用——它们的基线（baseline）位置天然不同，vertical-align 默认值也不同，光设 height 或 margin 很难真正对齐。
为什么 vertical-align: middle 单独写没用
因为 vertical-align 只对 display: inline 或 inline-block 元素生效，而 input 和 button 虽然默认是 inline，但它们的 baseline 计算逻辑不一致：input[type="text"] 按字体 x-height 推算中心点，button 则按其内部文字或图标的 font-size 基线定位。更麻烦的是，源码中换行会插入空格字符，导致额外水平间隙。
- 必须显式设
display: inline-block才能让vertical-align生效 -
input和button必须共用相同的font-family和font-size，否则 baseline 仍会偏移 - 父容器若没设
line-height或高度，vertical-align: middle的参考系就模糊，容易在 Chrome/Firefox 中差出 1–2px - 避免把
input和button写成两行 HTML，改成紧挨着写，或给父容器设font-size: 0再单独恢复子元素字号
用 display: flex 一劳永逸对齐
这是现代项目最推荐的解法：放弃微调 vertical-align 和 line-height，直接让父容器接管对齐逻辑。
- 父容器加
display: flex; align-items: center;，子元素自动垂直居中 - 别给
input或button单独设float、vertical-align或margin-top，这些会和 flex 行为冲突 - 若需搜索框拉伸占满容器，给
input加flex: 1，button保持自然宽度 - 注意 HTML 顺序：想实现「按钮在左、输入框在右」，就把
button写在input前面
box-sizing 和默认边框影响实际高度
即使 height: 40px 看似一致，input 和 button 的实际占用高度仍可能不同——根源在于 box-sizing 和浏览器默认 border/padding。
-
input默认是box-sizing: border-box，但老版本 IE 中button可能是content-box - Chrome 给
button默认加了border: 2px outset和padding: 1px 6px，而input是border: 1px solid+padding: 1px 2px - 建议重置：统一设
box-sizing: border-box，并显式声明border: 0、padding: 0、line-height: 1，再基于此加样式 - 如果用了图标字体（如 Font Awesome），确保
button内图标和input的font-size一致，否则图标撑高会破坏对齐
旧浏览器（IE10 及以下）的 fallback 方案
Flexbox 不可用时，display: table-cell 是最稳妥的替代，但它会丢失流式特性，只适合结构固定的表单行。
- 父容器设
display: table; width: 100% -
label、input、button都设display: table-cell; vertical-align: middle - 不能依赖
line-height居中多行文本——table-cell天然支持多行垂直居中，这点比line-height更可靠 - 缺点明显：无法响应式换行，且语义上偏离表单本意；仅建议作为兜底，不要在新项目中主用
真正容易被忽略的点是：对齐问题从来不是单一样式能解决的，它是一组渲染上下文的协同结果——font-size、box-sizing、display、vertical-align 缺一不可。哪怕只漏掉 font-size 继承，iOS Safari 或旧版 Chrome 就可能让你白调半小时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
