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

问题描述

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

我有一个网站，页面顶部带有导航栏。我希望链接之间的边距随着窗口大小的调整而缩小。但是，当我在Firefox中调整尺寸时，似乎只有背景色会改变。这给我留下了一个菜单栏，当屏幕水平缩小时，菜单栏不会显示出来。

我尝试删除了margin和word-spacing属性，并添加了“ 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>

解决方法

使用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>

,

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

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

解决这个问题的最佳方法是使您的设计具有响应性，例如使用Bootstrap响应式导航栏：

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

或媒体查询：

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