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

列表中显示的页脚中有一组链接是常见的，例如：

<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; } p { text-align: center; } 。 或者如果我知道<ul>的宽度，我只能说#footer ul { width: 400px; margin: 0 auto; } #footer ul { width: 400px; margin: 0 auto; } #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; } 

然而，很多时候你必须在你的<li>上使用display:block 。 在这种情况下，下面的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;} 

注意 ：不要在li中使用float:left 。 它会让你的李左alignment。

Answer 3

另一个解决scheme：

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

Answer 5

尝试在列表中包装列表，并给这个div的内联属性，而不是你的列表。

Answer 6

philfreo的答案是伟大的，它完美的作品（跨浏览器，与IE 7 +）。 只需将我的exp添加到li中的锚标签即可。

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