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 ul将整个事情集中在一起。
display: inline-block和the hack for IE6/7允许您在width上设置自己的li。

在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;
}

CSS设置居中水平列表中项目的宽度

1 个答案: