中心水平列表样式菜单

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