Navbar链接在窗口缩放时超出视口右侧的技术问题

问题根源 #

• .navbar设置了固定宽度2000px，无法跟随视口宽度自适应调整
• .container同时强制固定宽度和最小宽度为1220px，窗口宽度小于该值时容器不会收缩，导致导航链接溢出视口右侧
• 激活状态的CSS选择器错误，无法正确匹配当前活跃的链接

修改方案 #

1. 把.navbar的固定宽度改为width: 100%，让导航栏始终占满视口宽度
2. 调整.container的宽度设置，用max-width: 1220px替代固定宽度，同时保留margin: auto实现居中，去掉强制的最小宽度（或设置为合理小值）
3. 修正激活状态的选择器，改为.navbar__link.active，确保样式正确应用

修改后的完整代码 #

CSS部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

.navbar {
  position: fixed;
  height: 80px;
  width: 100%; /* 修改为100%，自适应视口宽度 */
  background-color: #000;
  line-height: 80px;
}

.navbar .container {
  justify-content: space-between;
}

.navbar__logo {
  color: rgb(34, 204, 57);
  font-weight: 600;
  font-size: 1.2rem;
}

.navbar__logo span {
  color: #fff;
}

.navbar__link {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

.navbar__link:hover {
  color: rgb(34, 204, 57);
  transition: all 0.3s ease;
}

/* 修正激活状态选择器 */
.navbar__link.active {
  color: rgb(34, 204, 57);
}

/* Utilities */
.container {
  display: flex;
  max-width: 1220px; /* 改为最大宽度，窗口小时自动收缩 */
  min-width: 320px; /* 可选：设置最小宽度避免过度压缩 */
  width: 100%; /* 占满可用宽度 */
  margin: auto;
}

HTML部分（无需修改原结构）

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header>
    <div class="navbar">
      <div class="container">
        <div class="navbar__logo">Some<span>Website</span></div>
        <div class="navbar__links">
          <a href="#" class="navbar__link active">Home</a>
          <a href="#" class="navbar__link">Home</a>
          <a href="#" class="navbar__link">Home</a>
          <a href="#" class="navbar__link">Home</a>
          <a href="#" class="navbar__link">Home</a>
        </div>
      </div>
    </div>
  </header>
</body>

效果说明 #

修改后，当窗口宽度缩小时：

• 导航栏会自动适配视口宽度，不会出现横向溢出
• 容器会跟随窗口宽度收缩，导航链接保持在视口内，与logo维持左右分布
• 激活状态的链接能正确显示高亮颜色

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