中心水平列表樣式菜單

Question

我有以下代碼：

CSS

#main 
{ 
    width:100%; 
    height:120px; 
    border:solid 1px #efefef; 
} 

#links 
{ 
    background-color:#808080; 
} 

#links ul 
{ 
    margin:0px auto; 
    padding:0px; 
    list-style:none; 
    background-color:#eee; 
    height:30px; 
} 

#links ul li 
{ 
    float:left; 
    margin:0px; 
    list-style:none; 
    padding:0px 10px; 
} 

HTML

<div id="main"> 
    <div id="links"> 
     <ul> 
      <li>Link 1</li> 
      <li>Link 2</li> 
      <li>Link 3</li> 
      <li>Link 4</li> 
      <li>Link 5</li> 
      <li>Link 6</li> 
     </ul>  
    </div> 
</div> 

的表項是動態的，所以我真的不能使用固定寬度的＃鏈接圖層，我希望列表完美居中。上面的代碼不起作用，我有各種方法，但似乎無法獲得列表居中。

我不想使用表格，部分原因是我討厭使用表格作爲菜單，而且我最終還是會有子菜單項目也會水平。

任何指針？

感謝 史蒂夫

Answer 1

以下是可能的解決方案：

• Centre widthless floats
• Centering Float Left Menus

Answer 2

地址：

text-align:center; 

至#links

#links ul將左右邊距設置爲自動。如果容器被告知將其內容居中，這將使它們具有相同的大小。上面的行會做到這一點。

Answer 3

這是我寫的東西，可以做你想做的。儘管使用jQuery。 Evenly spaced and justified horizontal list menu

Answer 4

風格有點詳細Safraz答案（感謝你，因爲對我來說太成功了！）

當我設置左：在UL的50％，並留下：李項-50％。 瀏覽器顯示一個水平滾動條，雖然沒有什麼可看的（因爲UL產生的溢出是左邊的50％，所以滾動條存在），所以解決方案是添加到包裝div（在這種情況下，id =鏈接）這種風格：

CSS

#links 
{ 
    /* .... */ 
    overflow-x: hidden ; 
} 

Answer 5

保證金0汽車只有當你給一個寬的作品！ 您需要使用內嵌塊，然後使用文本對齊中心

ul { 
    text-align: center;   
} 
ul > li { 
    display: inline-block; 
}