如何解决视口缩小时<button>重叠<nav>内容，自动换行到下一行的问题？

问题原因 #

该问题通常是导航栏、主题切换按钮的父容器未设置自适应换行规则，或按钮使用了脱离文档流的固定定位，导致视口宽度不足时元素互相挤压重叠。

方案1：Flex自适应布局（推荐，无需硬编码阈值） #

首先给两个元素包裹共同的父容器，再通过flex布局的换行规则实现自动适配：

HTML调整 #

<div class="header-wrapper">
  <nav aria-label="primary">
    <ul>
       <li>...</li>
       <!-- 其余菜单项 -->
    </ul>
  </nav>
  <button class="dark-theme-switcher" type="button" aria-label="Toggle dark/light mode"></button>
</div>

CSS代码 #

.header-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 空间不足时自动换行核心属性 */
  gap: 16px; /* 元素之间的间距可自行调整 */
  /* 如需导航居左、按钮居右，可添加以下属性 */
  /* justify-content: space-between; */
}

nav[aria-label="primary"] {
  flex-shrink: 1;
  min-width: fit-content; /* 避免导航被过度挤压 */
}

.dark-theme-switcher {
  flex-shrink: 0; /* 按钮宽度不被压缩 */
}

方案2：媒体查询方案（无需修改HTML结构） #

如果不想调整现有HTML结构，可直接通过媒体查询在指定宽度阈值下强制按钮换行：

/* 768px为示例阈值，需根据你的导航实际总宽度调整 */
@media (max-width: 768px) {
  nav[aria-label="primary"] {
    width: 100%;
    margin-bottom: 12px;
  }
  .dark-theme-switcher {
    display: block;
  }
}

注意事项 #

• 若按钮之前设置了position: absolute等脱离文档流的定位规则，需要先删除相关规则，才能正常换行
• 媒体查询的阈值不要直接套用通用值，需根据实际导航菜单项的总宽度调整到最适配的数值
• 若导航菜单项过多，可配合小屏汉堡菜单逻辑进一步优化头部空间占用

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