将水平列表显示为块

Question

我有一个水平无序列表，我想在div容器中水平居中（这个列表任意大于列表）。我正在考虑将ul显示为一个块，并使用自动边距将列表置于其父容器中。但是......我似乎无法将ul显示为块而不是100％宽度。

根据我的理解，块元素采用所需的宽度来包裹子元素（除非它们是未清除的浮点数或绝对位置），所以我认为将ul和li作为块放置应该可以解决问题。不幸的是它没有，我不明白为什么。

有什么想法吗？

这是代码： http://jsfiddle.net/kccbg/1/

Answer 1

尝试使用display: inline-block代替，并为容器设置text-align: center，如下所示：

<强> HTML：

<div class="container">
    <ul>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
    </ul>
</div>​

<强> CSS：

.container{
    width:100%;
    background-color:#CCC;
    height:20px;
    text-align: center;
}
ul{
    display:inline-block;
    margin:0 auto;
}
li{
    display:inline-block;
}

Example

Answer 2

更新:(基于gmeben的评论）

将css更改为：

.container{width:100%; background-color:#CCC; text-align:center}
li{display:inline;}

并删除

<li class="clear"></li>

来自html。

没有浮动和清除，也没有内联块（所有浏览器都不支持/渲染）。

Answer 3

如果您知道列表项的总宽度，则可以设置<ul>的宽度，然后将其边距设置为0 auto。的 jsFiddle example

<强> CSS

.container{
    width:100%; 
    background-color:#CCC; 
    height:20px;
}
ul{
    list-style:none;
    width:200px;
    margin:0 auto;
}
li{
    float:left; 
}