屏幕宽度<768px时Navbar宽度受CSS干扰问题求助

屏幕宽度小于768px时，Navbar无法按预期铺满全屏，疑似CSS冲突导致宽度异常，尝试调整多个CSS属性未解决，怀疑和SVG元素有关但无法定位具体原因。

页面渲染效果 #

相关代码 #

CSS代码 #

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: lightblue;
}

.navbar {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
}

.brand-title {
  font-size: 1.5rem;
  margin: .5rem;
}

.navbar-links {
  height: 100%;
}

.navbar-links ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 1rem;
}

.navbar-links li:hover {
  background-color: #555;
}

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

@media (max-width: 800px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .toggle-button {
    display: flex;
  }
  .navbar-links {
    display: none;
    width: 100%;
  }
  .navbar-links ul {
    width: 100%;
    flex-direction: column;
  }
  .navbar-links ul li {
    text-align: center;
  }
  .navbar-links ul li a {
    padding: .5rem 1rem;
  }
  .navbar-links.active {
    display: flex;
  }
}


/*svg's CSS*/

.svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-container a:hover use {
  stroke: red;
}

.slider-wrapper {
  text-align: center;
}

HTML代码 #

<nav class="navbar">
  <div class="brand-title">Hello
    <?= htmlspecialchars($user["username"]) ?> how are you feeling today</div>
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <div class="navbar-links">
    <ul>
      <li><a href="logout.php">Logout</a></li>
      <li><a href="">About</a></li>
    </ul>
</nav>

<link rel="stylesheet" type="text/css" href="./css/index.css">
<div class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000" width="600px">
      <defs>
        <circle id="c1" stroke-width="250" fill="none" r="375" pathLength="360" stroke-dasharray="30 360"/></defs>
      <g transform="translate(500 500) rotate(-90)" font-size="80" text-anchor="middle" dominant-baseline="middle">
        <a href="#" onclick="updateFeelingText(1)" transform="rotate(0)"><title>ONE</title><use href="#c1" stroke="orange"/><text onclick="displayNumber(1)" transform="rotate(15) translate(375 0) rotate(75)">1</text></a>
        <a href="#" onclick="updateFeelingText(2)" transform="rotate(30)"><title>TWO</title><use href="#c1" stroke="orange"/> <text transform="rotate(15) translate(375 0) rotate(45)">2</text></a>
        <a href="#" onclick="updateFeelingText(3)" transform="rotate(60)"><title>THREE</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(15)">3</text></a>
        <a href="#" onclick="updateFeelingText(4)" transform="rotate(90)"><title>FOUR</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-15)">4</text></a>
        <a href="#" onclick="updateFeelingText(5)" transform="rotate(120)"><title>FIVE</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-45)">5</text></a>
        <a href="#" onclick="updateFeelingText(6)" transform="rotate(150)"><title>SIX</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-75)">6</text></a>
        <a href="#" onclick="updateFeelingText(7)" transform="rotate(180)"><title>SEVEN</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-105)">7</text></a>
        <a href="#" onclick="updateFeelingText(8)" transform="rotate(210)"><title>EIGHT</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-135)">8</text></a>
        <a href="#" onclick="updateFeelingText(9)" transform="rotate(240)"><title>NINE</title> <use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(-165)">9</text></a>
        <a href="#" onclick="updateFeelingText(10)"transform="rotate(270)"><title>TEN</title> <use href="#c1" stroke="orange"/> <text transform="rotate(15) translate(375 0) rotate(165)">10</text></a>
        <a href="#" onclick="updateFeelingText(11)"transform="rotate(300)"><title>ELEVEN</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(135)">11</text></a>
        <a href="#" onclick="updateFeelingText(12)"transform="rotate(330)"><title>TWELVE</title><use href="#c1" stroke="orange"/><text transform="rotate(15) translate(375 0) rotate(105)">12</text></a>
        <a href="#" onclick="updateFeelingText(13)"> <circle r="250" fill="tomato" /><title>THIRTEEN</title><text transform="rotate(90)"> 13 </text></a>
    </g>
    </svg>
</div>
<script>

解决方案 #

问题根源是SVG的固定宽度导致页面出现横向滚动条，进而让Navbar的宽度计算异常。SVG设置了固定的width="600px"，当屏幕宽度小于600px时，SVG不会自动收缩，页面出现横向滚动，Navbar的宽度被限制在可视区域内，看起来像是没铺满全屏。

修复步骤：

1. 给SVG添加响应式宽度，替换固定的width="600px"，确保它能随屏幕宽度自适应：

.svg-container svg {
  width: 100%;
  max-width: 600px;
  height: auto;
}

也可以直接在SVG标签里修改：

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000" width="100%" style="max-width:600px;">

2. 强制Navbar在小屏幕下铺满宽度，在媒体查询中给.navbar添加width: 100%：

@media (max-width: 800px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    width: 100%; /* 新增这行 */
  }
  /* 其他原有样式保持不变 */
}

修改后，SVG会根据屏幕宽度自适应缩放，不会超出页面宽度，Navbar也能正常铺满全屏。

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