如何将两个内嵌SVG的按钮置于同一行？

问题分析 #

你的代码存在两个核心问题：一是两个按钮不在同一父容器内（第一个按钮被包裹在.mobile-button-adapt中，第二个按钮在容器外），块级元素默认会换行显示；二是flex: right是错误的属性用法，Flex布局的方向和对齐需要通过父容器的display:flex及相关属性控制。

可行解决方案 #

1. 统一父容器并启用Flex布局

给包含两个按钮的父容器添加Flex布局，让子元素横向排列：

.mobile-button-adapt {
  display: flex;
  /* 可选：设置按钮水平对齐方式，比如靠右对齐 */
  justify-content: flex-end;
  /* 可选：设置按钮之间的间距 */
  gap: 12px;
  /* 可选：让按钮垂直居中 */
  align-items: center;
}

2. 修正HTML结构

将两个按钮放入同一个父容器内，同时修复第一个按钮中未闭合的<div class="mobile-search">标签：

<div class="mobile-button-adapt">
  <button class="mobile-search-button">
    <div class="mobile-search">
      <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 12.3858 18.8721 12.6496 19.5091C12.9135 20.146 13.3002 20.7248 13.7877 21.2123C14.2752 21.6998 14.854 22.0865 15.4909 22.3504C16.1279 22.6142 16.8106 22.75 17.5 22.75C18.1894 22.75 18.8721 22.6142 19.5091 22.3504C20.146 22.0865 20.7248 21.6998 21.2123 21.2123C21.6998 20.7248 22.0865 20.146 22.3504 19.5091C22.6142 18.8721 22.75 18.1894 22.75 17.5C22.75 16.8106 22.6142 16.1279 22.3504 15.4909C22.0865 14.854 21.6998 14.2752 21.2123 13.7877C20.7248 13.3002 20.146 12.9135 19.5091 12.6496C18.8721 12.3858 18.1894 12.25 17.5 12.25C16.8106 12.25 16.1279 12.3858 15.4909 12.6496C14.854 12.9135 14.2752 13.3002 13.7877 13.7877C13.3002 14.2752 12.9135 14.854 12.6496 15.4909C12.3858 16.1279 12.25 16.8106 12.25 17.5Z" stroke="#422C1B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </button>

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
    <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"/>
      <line x1="8.68457" y1="16.2917" x2="24.4971" y2="16.2917" stroke="white" stroke-width="3.16667"/>
      <line x1="8.68457" y1="21.1042" x2="24.4971" y2="21.1042" stroke="white" stroke-width="3.16667"/>
    </svg>
  </button>
</div>

3. 额外优化（可选）

若按钮出现被压缩或尺寸异常的情况，可添加以下样式避免收缩并优化按钮样式：

.mobile-search-button, .navbar-toggler {
  flex-shrink: 0;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Vgilfoo