Question

所以我有一个example of what is the header on my 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;
}

我需要将这些项目置于主要文本的中心，但我尝试过的任何工作都没有。我究竟做错了什么？我怎么能做到这一点？

Answer 1

将block元素置于中心位置margin:0 auto但要实现此目的，您需要为block元素设置固定值。所以对于你的header #mainNav添加{width：372px}`并且没问题。

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

另一种解决方案是为display:inline-block

添加header #mainNav

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

Answer 2

尝试display: inline-block而不是float。这样你就可以集中精神。

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

CSS对齐浮动导航栏

2 个答案: