導航菜單

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代替浮動它們，然後應用塊容器上時，<ul>text-align中心 - 例如

#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定位10和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; 
}