Question

我有3个清单。我希望以横向方式将它们放在页面上。我怎样才能做到这一点？谢谢！

Answer 1

使用inline-block：

非常简单

#container {
    text-align: center;
}

#container ul {
    display: inline-block;
}

jsFiddle Demo

Answer 2

HTML

<div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    </ul>

        <ul id="navlist">
    <li id="active"><a href="#">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    </ul>

        <ul id="navlist">
    <li id="active"><a href="#">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    </ul>
    </div>

CSS

#navcontainer
{
    width: 300px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

http://jsfiddle.net/E25VX/1/

如何在页面上居中3 <ul>列表？</ul>

2 个答案: