html - 居中水平列表中元素的CSS设置宽度

Question

我有一个水平列表，用作分页控件。

我有两个额外的要求 - 我需要指定某些元素的宽度，并且我需要能够在页面中将列表居中。我可以做其中之一，但我不知道如何同时实现两者。

请参阅以下示例/起点:

<ul>
    <li class="previous"><a>previous</a></li>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li class="next"><a>next</a></li>
</ul>

li
{
    display: inline;
    list-style-type: none;
    margin: 5px;
}

a
{
    padding: 2px 10px 2px 10px;
    border: solid 1px #aaa;
    color: #131313;
    text-decoration: none;
}

jsFiddle here .

我希望 previous 和 next 元素的宽度相同，并且我希望整个元素都位于页面的中心。请注意，我无法知道完整列表的宽度，因此使用带有 margin: 0 auto; 的容器是行不通的。

必须是跨浏览器并且支持IE6。

Answer 1

参见: http://jsbin.com/azoquv

• text-align: center on ul 使整个内容居中。
• display: inline-block 和 the hack for IE6/7允许您在 li 上设置自己的 width。

在 IE6/7 + Chrome 中测试。它适用于所有现代浏览器。

ul {
    text-align: center;
    margin: 0;
    padding: 0
}
li
{
    display: inline-block;
    *display: inline;
    zoom: 1;

    list-style-type: none;
    margin: 5px;
}

a
{
    display: block;
    padding: 2px 10px 2px 10px;
    border: solid 1px #aaa;
    color: #131313;
    text-decoration: none;
}