我正在从Youtobe视频中重新创建苹果页面，以了解更多CSS和HTML。我遇到了导航样式的问题。
我的问题是导航部分太宽了。正如你可以看到的第一张照片图标是非常接近和在中间。不宽的一面长度在照片2（我的代码）。
它应该是这样的：
以及外观：
我有相同的代码作为一个在视频.链接（造型导航约17：30）：https://www.youtube.com/watch?v=DEpF1nNz1l0&t=183s
这是我的
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}<header>
<div class="cointainer">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-botton"></span>
</div>
</li>
<li class="nav-item">
<a href="index.html" class="nav-link nav-link-apple"></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-link-bag"></a>
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
<a href="index.html" class="nav-link nav-link-apple"></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Mac</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">iPad</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">iPhone</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Watch</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">TV</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Music</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Sport</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Support</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-link-search"></a>
</li>
<li class="nav-item nav-item-hidden">
<a href="#" class="nav-link nav-link-bag"></a>
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
1条答案
按热度按时间yzuktlbb1#
我为
.nav添加了80%的宽度，并将其放在.container类的中心。尝试添加图标（我找不到它们）