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

Posted 2023-03-05

【中文标题】如何在页面上居中 3 个 <ul> 列表？ [关闭]

【英文标题】：How can I center 3 <ul> lists on a page? [closed]

【发布时间】：2014-02-22 01:29:16

【问题描述】：

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

【问题讨论】：

您能否提供一些代码让我们知道您尝试了什么？

w3.org/Style/Examples/007/center.en.html

感谢您提供有用的链接。我已将完成的结果发布在此页面的底部。

【参考方案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