求助：修复导航栏（Navbar）自适应宽度失效问题

没问题！看你现在的导航栏用了固定宽度，这就是它没法适配不同屏幕的核心问题。咱们用Flexbox重构一下，让它在各种宽度下都能正常工作，同时简化一下冗余的结构。

第一步：简化HTML结构 #

原来的嵌套<ul>层级有点绕，咱们改成更清晰的结构，避免不必要的嵌套：

<nav class="navbar">
  <ul class="nav-container">
    <li class="nav-item">
      <a href="#">
        <img src="images/protection.png" width="20px" alt="保护">
        <span>保护</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="#">
        <img src="images/your-icon.png" width="20px" alt="功能名称">
        <span>功能名称</span>
      </a>
    </li>
    <!-- 继续添加你的其他导航项 -->
  </ul>
</nav>

第二步：用Flexbox实现自适应CSS #

核心就是用弹性布局替代固定宽度，让导航项自动分配空间，适配不同屏幕：

/* 重置默认样式，消除浏览器差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

.navbar {
  border-bottom: 1px solid lightgray; /* 可选：给导航栏加底部边框 */
}

.nav-container {
  display: flex; /* 开启弹性布局 */
  width: 100%; /* 占满父容器宽度 */
}

.nav-item {
  flex: 1; /* 每个导航项平分可用空间 */
  text-align: center; /* 内容水平居中 */
  border-right: 1px solid lightgray; /* 右侧添加分隔线 */
}

/* 最后一个导航项去掉右侧分隔线，避免多余边框 */
.nav-item:last-child {
  border-right: none;
}

.nav-item a {
  display: flex; /* 让图标和文字垂直居中对齐 */
  align-items: center;
  justify-content: center;
  gap: 8px; /* 图标和文字之间的间距 */
  padding: 12px 8px; /* 扩大点击区域，提升交互体验 */
  text-decoration: none;
  color: #333;
  width: 100%; /* 链接占满整个导航项 */
}

/* 鼠标悬停效果，增强交互反馈 */
.nav-item a:hover {
  background-color: #f5f5f5;
}

/* 移动端适配：小屏幕下自动切换为垂直布局 */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
  }
  
  .nav-item {
    border-right: none;
    border-bottom: 1px solid lightgray;
  }
  
  .nav-item:last-child {
    border-bottom: none;
  }
}

关键优化点说明 #

• 移除了所有固定宽度，用flex: 1让导航项自动适配容器宽度，不管屏幕怎么变都能均匀分配空间
• 用Flexbox实现了图标和文字的垂直居中，避免内容错位
• 添加了媒体查询，在手机等小屏幕下自动切换为垂直布局，避免内容挤在一起
• 优化了点击区域，让整个导航项都能被点击，提升用户体验

这样调整后，你的导航栏就能在从手机到桌面的各种屏幕宽度下稳定工作啦！

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