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

Question

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

我有一个网站，其页面顶部有一个导航栏。我希望链接之间的边距随着窗口大小的调整而缩小。但是，当我在 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 标签变得比它的容器大。

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

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

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

或媒体查询：

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