根本原因是未切断默认行内流且缺乏断点布局规则。需对容器设flex/grid、加flex-wrap:wrap，移动端用flex-direction:column并重置width、max-width及间距。
搜索框和按钮在小屏上挤成一团、错位、换行异常——根本原因是没切断默认的行内流，也没为不同断点定义明确的布局流向。直接套用 flex 或 grid 而不设断点规则，反而会让移动端更难控制。
为什么 display: inline 是响应式失败的起点
原生 <input type="text"> 和 <button></button> 默认是 inline 元素，它们会共享同一行、受父容器 white-space 和 font-size 影响，宽度不可控，width: 100% 在行内环境下无效。一旦屏幕变窄，浏览器只能靠换行“硬拆”，但换行位置不可预测，常出现按钮卡在输入框右侧半截、或整个表单塌陷。
必须先让它们脱离行内流：
- 对容器（如
<form></form>或外层<div>）设 <code>display: flex或display: grid，而非只改子元素 - 避免单独给
input加display: block后再用float—— float 已淘汰，且与 flex 共存会触发 BFC 冲突 - 若用
flex，务必加flex-wrap: wrap，否则小屏下会溢出容器而非换行
@media 断点中必须重置 flex-direction 和 width
桌面端常用横向排列（flex-direction: row），但移动端应强制改为垂直堆叠，否则按钮仍会试图贴右对齐，造成视觉割裂。仅靠 width: 100% 不够，因为 flex 项目默认不换行，也不自动撑满。
典型写法：
@media (max-width: 768px) {
.search-container {
flex-direction: column;
}
.search-input-field,
.search-submit-button {
width: 100%;
max-width: none;
}
.search-submit-button {
margin-top: 8px; /* 替代 margin-bottom，防后续元素被顶开 */
}
}
注意：max-width: none 是关键——很多框架（如 Bootstrap）会给按钮设 max-width: 200px，不覆盖会导致按钮在小屏下缩成一小条。
用 grid 替代 flex 更适合固定结构的搜索栏
如果搜索框 + 按钮结构稳定（无动态增删）、且需精确控制间距与对齐，grid 比 flex 更可控，尤其在处理图标按钮或带清空功能的复合输入框时。
示例结构：
.search-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
<p>@media (max-width: 768px) {
.search-grid {
grid-template-columns: 1fr;
}
}</p>
好处：
-
gap统一控制内外间距，不用反复调margin - 按钮宽度由
auto决定，不会随输入框缩放变形 - 切换断点时只需改列定义，逻辑比 flex 的
flex-direction+align-items+justify-content更直白
真正难的不是写对某一个断点，而是确保桌面端的 row 和移动端的 column 切换时，按钮的 padding、border-radius、图标尺寸都同步适配——这些细节不写进媒体查询里，用户在 iPhone 上点不到按钮就不是布局问题，是交互断裂。
