Question

我要使用以下代码创建导航栏：

<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居中的容器。

Answer 1

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

@Jones在评论中指出-1rem = 16px

将CSS更改为：

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

我的最大宽度为960px的容器似乎不起作用

1 个答案: