Question

我在博客上导航栏时遇到了麻烦。我似乎很容易做正常事情，但这次很麻烦。

我尝试过text-align，margin：0 auto;没有等等。似乎没有用！

如果有人可以帮助我，那会很棒，欢呼声

当前代码：

.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;

}

li {
    display:inline-block;
}


<ul class="nav">
<li><a href="http://www.hannahallinson.com/">Home</a></li>
<li><a href="http://www.hannahallinson.com/p/about.html">About</a></li>
<li><a href="http://www.hannahallinson.com/p/contact.html">Contact</a></li> 
<li><a href="http://www.instagram.com/hannahallinson">Instagram</a></li>
<li><a href="http://www.twitter.com/hannahallinson">Twitter</a></li>
</ul>

Answer 1

text-align:center和margin:0 auto逻辑上只有在要居中的元素具有非默认宽度时才有效，因为auto是block的{{1}}元素是100％。填充整个父级的元素无法居中。

给ul.nav一个固定的宽度，它将居中。

要使用text-align:center，您还需要限制ul，例如同时将其设为display:inline-block。 See this sample

Answer 2

将float: left;移至.tabs .widget li, .tabs .widget li

试试这个：

.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}

代替：

.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}

Answer 3

添加text-align：center;到父div

居中导航菜单

3 个答案: