按钮置于输入框右侧需先确保HTML中input在前、button在后，再通过display: flex、input设flex: 1撑满空间、button设flex-shrink: 0固定宽度实现精准右置，而非依赖justify-content或float。
按钮放输入框右侧，不是靠 float: right 硬怼，而是靠 Flexbox 的顺序 + flex 分配逻辑控制——HTML 元素顺序决定默认流向，CSS 控制谁占空间、谁不收缩。
HTML 结构必须是 input 在前、button 在后
很多人写反了：先放 <button> 再放 <input>，结果怎么调 CSS 都“挤”不到右边。Flex 默认按 DOM 顺序排列，所以正确结构是：
<form class="search-form"> <input type="search" name="q" placeholder="搜索..."> <button type="submit">?</button> </form>
只有这样，button 才天然在 input 右侧；如果反过来，就得用 order 扭转，徒增复杂度且易出错。
用 display: flex + flex: 1 实现输入框撑满、按钮固定宽
关键不是给按钮设 margin-left: auto，而是让输入框“主动让出右侧空间”。常见错误是只对容器设 display: flex，却不约束子元素行为：
立即学习“前端免费学习笔记（深入）”；
-
input必须加flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），否则它按内容宽度收缩，留不出右侧空间 -
button建议加flex-shrink: 0，防止小屏下被压缩变形 - 容器不要设
justify-content: flex-end，那会把整个表单右对齐，而不是按钮相对于输入框右对齐
最小可行样式：
.search-form {
display: flex;
gap: 4px;
}
.search-form input {
flex: 1;
min-width: 0; /* 防止 text-overflow 时 flex 计算异常 */
}
.search-form button {
flex-shrink: 0;
}Bootstrap 5+ 里别把 form 塞进 .navbar-nav
在 .navbar 中，如果把搜索 <form> 直接放进 <div class="navbar-nav">，它就会和导航链接平级排列，ms-auto 也无效——因为 .navbar-nav 是 display: flex 容器，它的子元素不响应外部 margin 类。
正确做法：
- 把
<form>移到.navbar-nav外层，同级放在<div class="container-fluid">里 - 用
ms-auto（不是me-auto）作用于<form>自身，让它“向右推” - 确保
<form>有class="d-flex"，否则ms-auto不生效
典型结构片段：
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-nav">...</div>
<form class="d-flex ms-auto">
<input class="form-control" type="search" name="q">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</nav>移动端小屏下按钮被截断？检查 min-width 和 box-sizing
输入框在窄屏上缩太小、按钮文字换行或溢出，往往不是 Flex 问题，而是盒模型没统一：
-
input和button都要设box-sizing: border-box，否则 padding/border 会撑出容器 -
button如果含图标（如<i class="fa-search"></i>），记得设min-width: 36px或类似值，避免图标被压扁 - 不要依赖
white-space: nowrap强撑按钮文字，优先用图标或短文案（如 “Go”、“→”）
一个常被忽略的点：input[type="search"] 在 Safari 上默认带内边距和圆角，需显式重置才能和其他元素对齐：
input[type="search"] {
-webkit-appearance: none;
appearance: none;
}真正卡住人的从来不是 Flex 属性本身，而是 HTML 顺序、父容器布局上下文、以及浏览器对 type="search" 的默认样式干预——调样式前，先确认结构是否干净、层级是否合理。
