如何水平居中未知宽度的无序列表？ [英] How to horizontally center an unordered list of unknown width?

问题描述

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

 < div id =footer> 
< ul> 
< li>< a href =＃>首页< / a>< / li& 
< li>< a href =＃>关于< / a>< / li& 
< li>< a href =＃>联系人< / 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;位置：相对; float：left;显示：block;左：50％; } 
 #footer ul li {position：relative; float：left;显示：block;右：50％; } 
  

It is common to have a set of links in a footer represented in a list, such as:

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.

But how do you center the unordered list items without setting a fixed width on the <ul>?

EDIT: clarification - the list items should be next to each other, not below.

解决方案

The solution, if your list items can be display: inline is quite easy:

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

However, many times you must use display:block on your <li>s. The following CSS will work, in this case:

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

这篇关于如何水平居中未知宽度的无序列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！