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

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

<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>

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

回答:

如果您的列表项可以,解决方案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%; }

以上是 如何水平居中未知宽度的无序列表? 的全部内容, 来源链接: utcz.com/qa/398750.html

回到顶部