如何水平居中未知宽度的无序列表？

小编典典

如何水平居中未知宽度的无序列表？

html

通常在列表中的页脚中有一组链接，例如：

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

我希望div＃footer中的所有内容都水平居中。如果这是一个段落，则只需说：p { text-align: center; }。或者，如果我知道宽度，<ul>我可以说#footer ul { width: 400px; margin: 0 auto; }。

但是，如何在不设置固定宽度的情况下将无序列表项居中<ul>？

编辑：澄清-列表项应该彼此相邻，而不是下面。

阅读 363

2020-05-10

共1个答案

小编典典

如果您的列表项可以，解决方案display: inline非常简单：

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

但是，很多时候您必须display:block在上使用<li>。在这种情况下，以下CSS将起作用：

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }

2020-05-10