0

だから私は私のTumblrページのヘッダーが何であるかの例を持っています。なぜこんなに苦労しているのかわかりませんが、わかりません。

<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。したがって、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 に答える