html - 可滚动居中的 NavBar

Question

我想要一个在滚动时可见的单页导航，并且导航项应该居中。

它可以使导航栏居中并且可以滚动，但不能同时滚动:

这是我的导航栏:

<nav>
    <ul class="nav">
        <li><a href="#aa">aa</a></li>
        <li><a href="#bb">bb</a></li>
        <li><a href="#cc">cc</a></li>
    </ul>
</nav>

CSS(CENTER 作品):

.nav{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
}
.nav ul {
    display: inline-block;
    list-style-type: none;
}

如果我添加:

position: fixed;
top: 0;

对于 .nav 类，导航是可滚动的，但不再居中。

Answer 1

问题出在 .nav 元素的宽度上。所以只需将 width: 100% 添加到您的 .nav 类

.nav{
   list-style:none;
   margin:0;
   padding:0;
   text-align:center;
   width: 100%;  
   postion: fixed;
   top:0
}