Question

我的设计有点小问题。

我有这个非常简单的HTML：

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

这只是更大小部件的一小部分。为了使thsi小部件工作，我至少需要这个css：

div {
    position: relative;
    width: 400px;
    height: 200px;
}

ul {
    z-index: 99;
}

li {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
}

现在我想把列表放到div中间。把它放下来是没有问题的，但我不可能把它放在中间。列表可以包含任意数量的项目。

JSfiddle：http://jsfiddle.net/MBxNU/1/

到目前为止，我试过例如：

ul {
    width: 100%;
    display: block;
    text-align: center;
}

但它没有用，我也不知道为什么。

如果你能给我一些帮助，我会很感激。

Answer 1

你在这里;）

div {
    position: relative;
    left: 20px;
    top: 20px;
    background-color: #EEE;
    width: 400px;
    text-align: center;
    height: 200px;
}

ul {
    padding: 0;
    display: inline-block;
    z-index: 99;
    list-style: none inside;
}

li {
    float: left;
    width: 16px;
    height: 16px;
    background-color: red;
    margin: 5px;
}

所以主要的想法是为text-align: center设置div，为display: inline-block设置ul，就是这样）

Answer 2

使用text-align：center的代码不起作用，因为您已将项目浮动到ul中。您可以使用display：inline-block而不是float：

li {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: red;
    margin: 5px;
}

JSfiddle：http://jsfiddle.net/caprella/r2RjM/1/

使用CSS将位置绝对的列表放入div的中间

2 个答案: