最稳方式是用 flex 布局：父容器设 display: flex 和 align-items: center，输入框与按钮均设 margin: 0，按钮加 white-space: nowrap 防换行；type="search" 有语义优势和自动清除按钮，但 ios 渲染差异大；回车提交需包裹 form 并阻止默认行为；移动端遮挡问题优先用 focus 时 scrollintoview 解决。
怎么让 <input type="search"> 和按钮在一行且对齐？
直接用 <input> 加 <button></button> 默认会错位，因为输入框有默认的上下边距和行高，按钮的基线又和文字对齐。最稳的方式是把它们包进一个容器，设为 display: flex，并统一垂直对齐方式。
- 给父容器加
display: flex; align-items: center;，避免因基线（baseline）导致按钮“悬空” - 移除
button的默认vertical-align: baseline（flex 下已不生效，但显式写上更保险） - 输入框和按钮都设
margin: 0，防止浏览器默认样式干扰 - 如果按钮文字太小，别只调
font-size，同步调height或用padding控制高度，否则和输入框高度不一致
type="search" 和 type="text" 有啥实际区别？
视觉上基本没差别，但语义和行为有差异：一是 type="search" 在 Safari 和部分 iOS 浏览器中会自动添加清除按钮（×）；二是它会触发搜索建议（如配合 <datalist></datalist>）；三是提交时表单 submit 事件的 input 类型值为 "search"，可用于 JS 区分逻辑。
- 清除按钮无法用 CSS 完全禁用（
appearance: none在 Safari 无效），如需彻底控制，改用type="text"更稳妥 - 若用
type="search"，记得测试 iOS 真机——某些老版本会把圆角/内边距渲染得比桌面端更夸张 - 无障碍方面，
type="search"会被屏幕阅读器识别为搜索控件，比type="text"+aria-label更简洁
怎么让搜索按钮响应回车键，且不刷新页面？
默认情况下，<input type="search"> 在 <form></form> 内按回车会触发表单提交，页面刷新。关键不是阻止回车，而是阻止表单默认行为，同时确保按钮点击也能走同一套逻辑。
- 把输入框和按钮包在
<form></form>标签里，然后监听submit事件，调用event.preventDefault() - 按钮用
type="submit"，而不是type="button"，这样既能点又能回车，逻辑统一 - JS 中取值统一用
form.querySelector('input[type="search"]').value.trim()，避免分别监听click和keypress - 别忘了给输入框加
name属性（如name="q"），否则表单序列化时拿不到值
移动端键盘弹出后，搜索框被遮挡怎么办？
这不是按钮排版问题，而是视口滚动和软键盘行为冲突。iOS 尤其明显：焦点进入输入框后，页面不会自动滚动到可视区顶部，导致输入框被键盘盖住。
- 不要依赖
window.scrollTo()手动滚动——时机难把握，容易抖动或失效 - 优先用
<input>的scrollIntoView({ behavior: 'smooth', block: 'nearest' })，在focus事件里调用 - 确保父容器没有
overflow: hidden或transform（如translateZ(0)），否则scrollIntoView失效 - 如果用了
position: fixed的搜索栏，iOS 键盘弹出会触发resize事件，可监听并手动调整top值（但慎用，不同机型表现不一）
white-space: nowrap —— 没加这句，窄屏下按钮文字换行会直接撑开高度，破坏和输入框的对齐。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
