html - 中心导航菜单

Question

我希望我的导航菜单在中心我尝试了在另一个类似问题中发布但对我不起作用的方法。这是小提琴

这是代码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定位。首先将50% 放在左侧。然后，只要只占用他们需要的空间（非阻塞），就已经向右移动了 50% 的宽度。ulliulli

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;
}