如何在页面上居中 3 个 <ul> 列表？ [关闭]答案

【问题标题】：How can I center 3 <ul> lists on a page? [closed]如何在页面上居中 3 个 <ul> 列表？ [关闭]
【发布时间】：2014-02-22 01:29:16
【问题描述】：

我有 3 个列表。我希望以水平方式将它们集中在页面上。我怎样才能做到这一点？谢谢！

【问题讨论】：

您能否提供一些代码让我们知道您尝试了什么？
w3.org/Style/Examples/007/center.en.html
感谢您提供有用的链接。我已将完成的结果发布在此页面的底部。

标签： html css layout html-lists centering

【解决方案1】：

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/

【讨论】：

谢谢！另一个好方法。
Thor，你想让垂直列表水平组织吗？还是水平列表？
我正在寻找要水平排序的列表。我希望它们在页面上居中，但我希望每个列表中的所有文本都位于左侧。现在知道了，谢谢！ :)
如果你得到它，那么祝你好运，我不确定我是否理解你想要什么
这就是我想要做的。给你：jsfiddle.net/fxP7c

【解决方案2】：

使用inline-block 很容易：

#container {
    text-align: center;
}

#container ul {
    display: inline-block;
}

jsFiddle Demo

【讨论】：