通过 CSS Flexbox 布局或 display: inline-block 方式，可轻松实现两个按钮（含 SVG 图标）水平并排显示，避免换行、溢出或错位问题。
通过 css flexbox 布局或 `display: inline-block` 方式，可轻松实现两个按钮（含 svg 图标）水平并排显示，避免换行、溢出或错位问题。
在现代 Web 开发中，将多个按钮（尤其是带 SVG 图标的自定义按钮）强制置于同一行，最可靠、语义清晰且响应友好的方案是使用 Flexbox 布局。原始代码中两个 <button></button> 元素彼此独立、未包裹在共同容器内，且缺乏明确的布局控制，导致浏览器按块级元素默认行为垂直堆叠——即使设置了 flex: right（该属性本身无效），也无法生效。
✅ 推荐做法：使用语义化容器 + Flexbox
为两个按钮添加统一父容器，并应用 display: flex：
<div class="button-row">
<button class="mobile-search-button">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="38" height="38" rx="19" fill="#F5F5F5"/>
<path d="M25.75 25.75L21.25 21.25M12.25 17.5C12.25 18.1894..." stroke="#422C1B" stroke-width="2"/>
</svg>
</button>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="33" height="33" rx="16.5" fill="#422C1B"/>
<line x1="8.68457" y1="11.4792" x2="24.4971" y2="11.4792" stroke="white" stroke-width="3.16667"/>
<!-- 其余两条线略 -->
</svg>
</button>
</div>对应 CSS（推荐写入 <style></style> 或外部样式表）：
.button-row {
display: flex;
gap: 8px; /* 可选：添加按钮间间距，更美观 */
align-items: center; /* 垂直居中对齐，避免 SVG 高度差异导致错位 */
}
/* 可选：确保按钮不换行，尤其在小屏下 */
.button-row {
flex-wrap: nowrap;
}⚠️ 注意事项：
- ❌ 不要使用
display: inline（如答案中提到的.inline-button）——它会忽略width/height/margin等块级属性，且难以控制对齐； - ✅ 优先用
display: inline-block或（更优）flex容器，兼顾兼容性与可控性； - 若需响应式适配（如移动端堆叠），可结合媒体查询：
@media (max-width: 576px) { .button-row { flex-direction: column; gap: 4px; } } - 检查按钮自身 CSS 是否设置了
width: 100%、margin: auto或float等干扰布局的规则——这些常导致意外换行。
总结：用一个 display: flex 容器包裹按钮，是最简洁、健壮、可维护的解决方案。它天然支持对齐、间距、顺序和响应式控制，无需 hack，也完全兼容 Bootstrap（如示例中的 data-bs-toggle 属性）。
