1

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

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

我要说的第二点是我不介意使用inline-block，但我需要对不支持的浏览器进行后备。

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

我需要在仍然使用display:block; float:left;.
或者有没有办法在无序列表上具有可变宽度同时仍然居中？我有任何建议。

谢谢。

4

1 回答 1

2

试试这个 - 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;
}
于 2012-06-11T22:54:50.987 回答