css - 根据 <li> 大小在 <ul> 中居中 <li> 元素

Question

在上图中，您可以看到 - 它并不完美 - 所有 <ul>元素具有相同的大小，并且 <li>元素没有，但它们位于 <ul> 的中心无论大小是多少(总是假设会更小)

我该怎么做？

ul{ width:160px; }
li{ width:auto; margin:5px auto;}

不工作..

-图片编辑文字-

Answer 1

我真的不明白你想用你的图片表达什么，但这里是如何制作看起来像它们的东西。

参见: http://jsfiddle.net/thirtydot/wGpPc/

HTML:

<div class="listContainer">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        ..
    </ul>
</div>

CSS:

.listContainer {
    width: 160px;
    background: #ccc;
    border: 1px solid #444;
    float: left;
    text-align: center;
    margin-right: 9px
}
.listContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    background: #f0f;

    /* for ie6/7 */
    *display: inline;
    zoom: 1
}
li {
    margin: 5px 0;
    background: #fff
}