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>

列表项是动态的，所以我不能在#links层上使用固定宽度，我希望列表完全居中。上面的代码不起作用，我有各种各样的方法，但似乎无法使列表居中。

我不想部分使用表格，因为我讨厌使用表格进行菜单，而且我最终也会有子菜单项也是水平的。

任何指针？

由于史蒂夫

Answer 1

以下是可能的解决方案：

Answer 2

添加：

text-align:center;

至#links

#links ul将左右边距设置为自动。如果告诉容器将其内容集中在一起，这将使它们具有相同的大小。上面这一行就是这样。

Answer 3

这是我写的可以做你想做的事。但是使用jQuery。 Evenly spaced and justified horizontal list menu

Answer 4

Safraz回答的一个小风格细节（谢谢你也为我工作！）

当我向左设置：ul的％50，并且左边：-50％的li项目。浏览器显示一个水平滚动条，虽然没有什么可看的（滚动条是因为UL产生的溢出，左边50％），所以解决方案是添加到包装div（在这种情况下id =链接）这种风格：

<强> CSS

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

Answer 5

保证金0自动仅在您给出宽度时才有效！你需要使用内联块，然后文本对齐中心

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

中心水平列表样式菜单

5 个答案: