根据 <li> 大小在 <ul> 中居中 <li> 元素答案

【问题标题】：center <li> elements in <ul> depending on <li> size根据 <li> 大小在 <ul> 中居中 <li> 元素
【发布时间】：2011-08-17 19:57:16
【问题描述】：

在上图中，您可以看到-它并不完美-所有<ul> 元素的大小都相同，而<li> 项没有，但无论大小如何，它们都以<ul> 为中心是（总是假设会更小）

我该怎么做？

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

不工作..

-用文本编辑的图像-

【问题讨论】：

当您的宽度未定义时，您不能使用 margin: auto。为什么不能使用 li{ text-align: center;宽度：100%； }?
你可以在我的编辑中看到，我需要 text-align:left :(
问题是什么/你真正想要发生什么？您想要获得第一张图片中的外观吗？
我认为你的问题主要是因为没有你的棕色盒子这样的东西。您应该考虑将

标签： css positioning centering

【解决方案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
}

【讨论】：