Question

首先，我首先要说的是我无法控制HTML，这就是HTML的样子：

<ul class="orbit-bullets">
  <li>1</li>
  <li>2</li>
</ul>

我要说的第二个问题是，我不介意使用inline-block，但我需要对非支持性浏览器进行回退。

我试图将列表集中在一起。列表项必须以内联方式显示，但它们必须是块元素，因为我声明了宽度，高度和文本缩进。所以我知道我可以使用display:block; float:left;，但我希望这些元素能够居中。有时有三个列表项或四个或更多，所以我不想在无序列表上设置小于500px的固定宽度。如果我将宽度设置为500px，当只有两个或三个列表项时，它们看起来非常偏离中心。

我需要将列表项自身置于无序列表中，同时仍然使用display:block; float:left;。
或者有没有办法在无序列表上有可变宽度仍然把它集中在一起？我有任何建议。

感谢。

Answer 1

试试这个 - http://jsfiddle.net/jD6yp/

ul {
    width: 500px;
    text-align: center;
    background: beige;
}

li {
    display: inline-block;

    zoom: 1;          /* for old IE-s */
    *display: inline; /* for old IE-s */

    padding: 10px;
    margin: 20px;
    border: 1px solid pink;
}

中心块元素

1 个答案: