导航栏链接不随背景颜色调整大小

Question

我基本上是 HTML/CSS 的新手，所以我不确定如何描述我的问题。如果事情不清楚，我深表歉意。

我有一个网站，其页面顶部有一个导航栏。我希望链接之间的边距随着 window 的大小调整而缩小。但是，当我在 Firefox 中调整它的大小时，似乎只有背景颜色发生了变化。这给我留下了一个菜单栏，当屏幕水平缩小时，菜单栏会延伸到视野之外。

我试过删除边距和字间距属性以及添加“display: flex”属性，但似乎无济于事。（通常我的编辑会让事情变得更糟。）

PS：在尝试将 'ul' 标记添加到 'nav' 链接后出现此问题。

nav {
  background-color: #3BD9D9;
  font-size: large;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  /*word-spacing: 1em;*/
  position: f;
  display: flex;
}

nav li {
  display: inline-block;
  border-width: 3px;
  border-style: outset;
  border-color: #0A46BF;
  border-radius: 30px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  list-style-type: none;
}

<nav>
  <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../services.html">Services</a></li>
    <li><a href="../shopping/shop.html">Shop</a></li>
    <!--    <ul>
            <li><a href="#monitors">Monitors</a></li>
            <li><a href="#cases">Cases</a></li>
        </ul><!-->
    <li><a href="../reviews.html">Reviews</a></li>
    <li><a href="../contact.html">Contact</a></li>
    <li><a href="../about.html">About/FAQ</a></li>
  </ul>
</nav>

Answer 1

使用display: flex和justify-content: space-between

nav {
  background-color: #3BD9D9;
  font-size: large;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  /*word-spacing: 1em;*/
  position: f;
  display: flex;
}

nav ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0;
}

nav li {
  display: inline-block;
  border-width: 3px;
  border-style: outset;
  border-color: #0A46BF;
  border-radius: 30px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  list-style-type: none;
}

<nav>
  <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../services.html">Services</a></li>
    <li><a href="../shopping/shop.html">Shop</a></li>
    <!--    <ul>
            <li><a href="#monitors">Monitors</a></li>
            <li><a href="#cases">Cases</a></li>
        </ul><!-->
    <li><a href="../reviews.html">Reviews</a></li>
    <li><a href="../contact.html">Contact</a></li>
    <li><a href="../about.html">About/FAQ</a></li>
  </ul>
</nav>

Answer 2

发生这种情况是因为调整屏幕大小时 ul 标签变得比其容器大。

为避免这种情况，您可以在导航中添加溢出属性（即溢出：滚动）（糟糕的选择）。

无论如何，解决此问题的最佳方法是让您的设计具有响应性，例如使用 bootstrap 响应式导航栏：

https://getbootstrap.com/docs/4.5/components/navbar/

或媒体查询：

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

导航栏链接不随背景颜色调整大小

Nav bar links don't resize with background-color

html

css

background-color

nav