我想用以下代码制作一个导航栏：
<nav>
<ul class ="container">
<li class = "ul--wrap"><a class = "p p__li" href="index.php?page=home">Home</a></li>
<li class = "ul--wrap"><a class = "p p__li" href="index.php?page=activities">Activities</a></li>
<li class = "ul--wrap"><a class = "p p__li" href="index.php?page=locations">Locations</a></li>
<li class = "ul--wrap"><a class = "p p__li"href="index.php?page=register">Register</a></li>
<li class = "ul--wrap"><button class = "btn"><a class = "p p__li p__li--light" href="index.php?page=tickets">Tickets</a></button></li>
</ul>
</nav>
我想要一个容器，以便导航栏不会扩展 960 像素的宽度。我有这个容器代码：
.container{
max-width: 96rem;
vertical-align: center;
margin: 0 auto;
}
当我想更改<li>项目之间的空间时，<li>项目会扩展 960 像素居中的容器。
我相信您的问题在于您创建max-width的.containerCSS 属性中的属性。
正如@Jones 在评论中指出的那样 - 1rem = 16px
将您的 CSS 更改为：
.container{
max-width: 60rem;
vertical-align: center;
margin: 0 auto;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句