Question

我希望我的导航菜单位于中心，我尝试了在另一个类似问题中发布的方法但不适用于我..这里是fiddle

这是代码 HTML：

<div id="nav">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</div>

CSS：

    #nav {
    background:#111212;
    width: 100%;
    height:55px;
    float: left;
    margin:0 auto;
    padding:0;
    font-size:125%;
}
#nav ul{
    list-style: none;
    width: 80%;
    margin: 0 auto;
    padding:0;
}

#nav li {
    float:left;
}

#nav li a {
    display:inline-block;
    padding:17.5px 15px 17.5px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #438181; 
}

#nav li a:hover {
    color:#438181;
    background-color:#fff; 
}

Answer 1

一种方法是将列表项更改为inline-block而不是浮动它们，然后在块容器上应用text-align中心，<ul> - 例如。

#nav ul{
    list-style: none;
    width: 80%;
    margin: 0 auto;
    padding:0;
    text-align: center;
}

#nav li {
    display: inline-block;
}

http://jsfiddle.net/suZR3/11/

Answer 2

您可以在relative和ul项目上使用li定位。首先将ul 50％置于左侧。然后，只要li只占用他们需要的空间（非阻挡），就可以向右移动50％的宽度。

http://jsfiddle.net/suZR3/6/

#nav ul {
     position: relative;
     left: 50%;
}
#nav li {
     position: relative;
     right: 50%;
}

Answer 3

为了让浏览器在浮动元素时计算自动边距，它需要宽度。

#nav {
    background:#111212;
    height:55px;
    padding:0;
    font-size:125%;
}
#nav ul{
    list-style: none;
    width: 550px;
    margin: 0 auto;
    padding:0;
}

导航菜单位于中心

3 个答案: