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

Question

在列表中表示的页脚中有一组链接是很常见的,例如:

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

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

Answer 1

解决方案,如果您的列表项可以display: inline很容易:

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

但是,很多时候你必须使用display:block你的<li>s.在这种情况下,以下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%; }

Answer 2

使用以下css解决您的问题

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

注意:不要float:left在li中使用.它会使你的左对齐.

Answer 3

还有一个解决方案

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

然后,如果缩放文本,ul不会跳转到下一行.

Answer 4

这取决于你是否意味着列表项目低于前一个或右前一个,即:

Home
About
Contact

要么

Home | About | Contact

第一个你可以做的只是:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

第二个可以这样做:

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }