0

所以我有一个例子，说明我的 Tumblr Page 上的标题是什么。我不知道为什么我在这样做时遇到了这么多麻烦，但我无法弄清楚。

我有一个<ul>左浮动导航栏，其父容器的宽度为 50%。我需要将这些项目置于正文下方的中心，但由于它们向左浮动，这很难实现。

<nav id="mainNav">  
    <ul>            
        <li><a href="/ask">Ask</a></li>                  
        <li><a href="/archive">Archive</a></li>
        <li><a href="/random">Random</a></li>
        <li><a href="http://skwh.tumblr.com/rss">RSS</a></li>
        <li><a href="javascript:;" id="btnSearch">Search</a></li> 
        <li><a href="http://twitter.com/SomekidwithHTML">Twitter</a></li> 
    </ul>
</nav>

CSS：

header #mainNav {
    width:auto;
    margin:auto;
}
header #mainNav ul {
    height:30px;
    width:auto;
}
header #mainNav ul li {
    list-style-type:none;
    float:left;
    margin:2;
    background-color:#1BA300;
    border:2px solid black;
}
header #mainNav ul li:hover {
    background-color:black;   
} 
header #mainNav ul li a {
    color:#00FF00;
    display:block;
    padding:5px;
}

我需要这些项目在正文下居中，但我尝试过的没有任何工作。我究竟做错了什么？我怎样才能做到这一点？

4

2 回答 2

1

block要使您需要的元素居中，margin:0 auto但要实现这一点，您需要为block元素设置一个固定的 with 。因此，对于您的header #mainNav添加 {width:372px}` ，就可以了。

演示：http: //jsfiddle.net/qTPec/2/

display:inline-block另一种解决方案是添加header #mainNav

演示：http: //jsfiddle.net/qTPec/3/

于 2012-12-16T18:25:56.153 回答
0

尝试display: inline-block而不是float. 这样你就可以居中。

http://jsfiddle.net/qTPec/1/

于 2012-12-16T18:23:13.800 回答