时间戳

首页 > 解决方案 > 我的容器 max-width: 960px 似乎不起作用

html - 我的容器 max-width: 960px 似乎不起作用

问题描述

我想用以下代码制作一个导航栏：

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

我想要一个容器，这样导航栏就不会扩展 960px 的宽度。我有这个容器代码：

.container{
    max-width: 96rem;
    vertical-align: center;
    margin: 0 auto;
 }

当我想更改<li>项目之间的空间时，<li>项目会扩展 960px 居中的容器。

标签： htmlcsscontainers

解决方案

我相信您的问题在于您创建max-width的 CSS 属性中的属性。.container

正如@Jones 在评论中指出的那样——1rem = 16px

将您的 CSS 更改为：

.container{
    max-width: 60rem;
    vertical-align: center;
    margin: 0 auto;
}

推荐阅读