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

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

<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>上设置固定宽度?

编辑:澄清 – 清单项目应该是彼此相邻,不低于。

解决办法,如果你的列表项可以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%; } 

使用下面的CSS来解决你的问题

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

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

另一个解决scheme:

 #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的内联属性,而不是你的列表。

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