0

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

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

任何的想法？

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

4

3 回答 3

2

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

例子

于 2012-06-19T19:39:02.517 回答
2

更新：（基于gmeben的评论）

将css更改为：

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

并删除

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

来自 html。

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

于 2012-06-19T19:41:51.763 回答
0

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

CSS

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

​</p>

于 2012-06-19T19:40:06.320 回答