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

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

<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%; }

使用以下CSS解决您的问题

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

注意：请勿float:left在li中使用。它会使您的li向左对齐。

另一种解决方案：

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

如果文本放大，则ul不会跳到下一行。

这取决于您是说列表项是位于上一个项目的下方还是其右侧，即：

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

尝试将列表包装在div中，并为该div提供内联属性，而不是列表。

philfreo的答案很好，它的运行非常完美（跨浏览器，使用IE 7+）。只需将我的exp添加为li内的anchor标签。

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }