html - 导航栏元素在 CSS 中响应不佳

Question

我正在为类(class)创建一个网站，我已经完成了所有页面，现在我正在编写我的媒体查询。除导航栏元素外，媒体查询中的一切都按预期工作。

这是它最初的样子:

但是当我开始调整我的屏幕大小时，导航栏元素会缩小并且继续不占用所有导航栏，如下所示:

下面是我的导航链接的 html 和 css 代码，如果有人能帮助我，我将不胜感激:

HTML:

<ul id="nav">
    <li><a href="index.html">Home</a></li>  
    <li><a href="about.html">About</a></li>
    <li><a href="members.html">Members</a></li>
    <li><a href="events.html">Events</a>    </li>
    <li><a href="rushweek.html">Rush Week</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Css: Media Queries *注意:这是我在@media only screen 的媒体查询中的导航 css and (max-width: 64em

#nav{
    list-style-type: none;
    padding:0;
    margin: 0;
    width:100%;
}
#nav li{
    display: inline;
    padding:0;
    margin:0;
    line-height: 33px;
    height:33px;
    font-size: 18px;
    background-color: #ffd700;
    width:20%;
    text-align: center;
    box-shadow: 20px;
    margin-left: -4px;
    border:outset;
    border-top-style: solid;
    border-top-color:#000000;
    border-bottom-style: solid;
    border-bottom-color:#000000;
}
#nav li a{
    text-decoration: none;
    color:#000000;
}

Answer 1

在 #nav li 中使用 display: inline-block;。只有 block 类型的元素可以像这样调整大小。

注意:您将宽度指定为 20%，在 6 个元素的情况下会溢出。 16.6% 是 100% 的 1/6。这仍然会溢出，因为边界在盒子的“外面”。要处理此问题，您还应该添加 box-sizing: border-box;，它会在框的宽度和高度内显示边框和填充，而不是在框外。