input 和 button 在同一行错位是因 vertical-align 默认值不同、基线不一致、字体大小差异及换行产生的空白符所致；用 display: flex + align-items: center 可一劳永逸解决，兼容旧浏览器时需统一 vertical-align、font-size 和 line-height。
input 和 button 在同一行却上下错位？这不是你代码写错了，而是浏览器默认渲染行为在作祟。它们天生不“等高对齐”，必须显式干预。
为什么设置相同 height 仍不对齐
即使给 input 和 button 都设了 height: 40px，视觉上依然一高一低——根本原因不是 height 值没生效，而是它们的 vertical-align 默认值不同，且基线（baseline）位置天然不一致。
-
input的 baseline 在文本底部（含下划线位置），button的 baseline 在其内容（比如文字或图标）的字体基线上 - 若
button内有图标字体（如font-awesome或iconfont），它的font-size往往比input默认的 14px 更大（比如 16px 或 18px），直接撑高了按钮盒模型 -
box-sizing差异也会干扰：input默认是border-box，而老版本浏览器中button可能是content-box，导致同样 height 下实际占用空间不同
消除换行导致的间隙（inline 元素的坑）
HTML 源码里 input 和 button 换行，会在两者之间生成一个空格字符（U+0020），被当作 inline 元素间的空白符渲染出来，表现为几像素的水平缝隙。
- 最稳妥：把两个标签写在同一行，中间不留空白 ——
<input><button></button> - 更通用：给父容器设
font-size: 0，再单独给子元素恢复字号（如.search-input { font-size: 14px; }） - 不推荐用
float清除间隙，它会让元素脱离文档流，后续布局容易失控
用 Flexbox 一劳永逸对齐
放弃折腾 vertical-align 和 line-height，直接用 display: flex 管理父容器。这是现代、可控、响应式友好的解法。
- 父容器加
display: flex; align-items: center;，自动垂直居中对齐子元素 - 注意 HTML 顺序：
button放input前面，才能实现「按钮在左、输入框在右」的常见布局 - 避免给
input或button单独设float、vertical-align或margin-top，这些会和 flex 行为冲突 - 如果需要等宽拉伸（如搜索框占满容器），给
input加flex: 1，button保持自然宽度
兼容旧浏览器时的 fallback 方案
IE10 及以下不支持 Flexbox？那就得回归传统方案，但必须更谨慎。
- 统一设
vertical-align: top或middle，而不是依赖 baseline - 确保两者
font-size一致（哪怕只是临时设成相同值），否则图标字体或文字大小差异会破坏对齐 - 用
line-height匹配 height（如height: 40px; line-height: 40px;），对button特别有效 - IE7/8 中
input和button盒模型差异更大，建议包裹一层span并设display: inline-block+vertical-align统一控制
真正麻烦的从来不是“怎么对齐”，而是“为什么明明设了一样的 height 还不对齐”。盯住 vertical-align、空白符、字体大小这三点，90% 的对齐问题当场消失。Flexbox 是首选，但理解底层机制，才能在它失效时快速切到备用路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
