中心<li> <ul>中的元素取决于<li> size </li> </ul> </li>

Question

在上图中，您可以看到 - 不完美 - 所有<ul>元素都具有相同的大小，<li>项目没有，但它们位于{{1无论大小是多少（总是假设它会更小）

我该怎么做？

<ul>

无法正常工作..

- 用文字编辑的图像 -

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
}