居中水平UL

我似乎无法让我的UL中心在其DIV中。居中水平UL

<div id="sitenavdiv"> 
    <ul id="sitenav"> 
     <li class="about"><a href="#" title=""><img src="images/about-link.png" alt="about"></a></li> 
     <li class="portfolio"><a href="#" title=""><img src="images/portfolio-link.png" alt="portfolio"></a></li> 
     <li class="contact"><a href="#" title=""><img src="images/contact-link.png" alt="contact"></a></li> 
    </ul> 
</div>

我有以下的CSS：

#sitenavdiv {padding-top: 30px; width: 620px; position: relative; float: left; text-align:center;} 

ul#sitenav {width: 231; margin: 0 auto; display: inline;} 
ul#sitenav li.about{width: 64px; height: 31px; display: block; float: left; overflow: hidden;} 
ul#sitenav li.about a{width: 64px; height: 31px; display: block;} 
ul#sitenav li.about a:hover{width: 64px; height: 31px; display: block; margin-top:-31px;} 

ul#sitenav li.portfolio{width: 88px; height: 31px; display: block; float: left; overflow: hidden} 
ul#sitenav li.portfolio a{width: 88px; height: 31px; display: block;} 
ul#sitenav li.portfolio a:hover{width: 88px; height: 31px; display: block; margin-top:-31px;} 

ul#sitenav li.contact{width: 79px; height: 31px; display: block; float: left; overflow: hidden} 
ul#sitenav li.contact a{width: 79px; height: 31px; display: block;} 
ul#sitenav li.contact a:hover{width: 79px; height: 31px; display: block; margin-top:-31px;}

我敢肯定，这是简单的东西，但我似乎无法得到正确的组合。

来源

2011-04-13 Seth

您的ul#sitenav规则应该是：

ul#sitenav {width: 231px; margin: 0 auto; display: block; }

注意display: block;和231px而不是仅仅231。

（查看和编辑，有一些额外的颜色，http://jsfiddle.net/eRRjy/）

来源

2011-04-13 20:38:50 VoteyDisciple

删除'显示：inline'，但没有必要将它设置为'block'。 UL默认为块级。 – 2011-04-13 20:40:34

如果没有更早的规则更改该默认值，那么这是真的。缺少'ul {display：inline; }'规则'ul＃sitenav'规则可以删除'display：block;'并且完成它。 – VoteyDisciple 2011-04-13 20:49:55

居中水平UL

回答

相关问题