问题描述
在列表中表示的页脚中有一组链接是常见的,例如:
< 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%; }
这篇关于如何水平居中未知宽度的无序列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!