导航栏项目在css中响应不佳

Question

我正在为课程创建一个网站，我已完成所有页面，现在我正在编写媒体查询。除导航栏项目外，媒体查询中的所有内容都按预期工作。

这就是它最初的样子：

但是当我开始调整我的屏幕尺寸时，导航栏项目缩小并继续不占用所有导航栏，如下所示：

下面是我的导航链接的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 only屏幕的媒体查询中的nav css和（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

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

注意：您指定了20％作为宽度，如果6个元素会溢出。 16.6％是100％的1/6。这仍然会溢出，因为边框在框外“。要处理这个问题，你还应该添加box-sizing: border-box;，它在框的宽度和高度内显示边框和填充，而不是在外面。

Answer 2

你的代码中有一点错误：你的列表中有6个li项目，并尝试给它们每个20％的宽度（应该是16.66％，但要注意你的边框！）。

删除display:inline并使用float:left代替，这应该会为您提供所需的效果

欢呼声， 丹