1

#navナビゲーション バー ( ) を作成し、各ナビゲーション アイテムを div ( )にしたいと考えています#nav div。しかし、これはうまくいきません。これが私が試していることです：

#nav {
    background: url("navbg.png"); /* navbg.png is 1x40 pixels */
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
}
#nav div {
    width: 200px;
    height: 40px;
    background: url("Selected.png"); /* Selected.png is 200x40 pixels */
    text-align: center;
}

div内の 2 つの div でこれを行うと#nav、1 つが左に表示され、もう 1 つが下に表示されます。これを行うと、display: inline;in#nav divを使用すると中央に配置されますが、div には背景がなく、2 つの div のテキストが並んで表示されます。

text-align: center;div が画像のように機能し、影響を受けて並べて表示されるようにしたいと考えています。

4

3 に答える 3

2

試してみるdisplay: inline-blockかfloat: left#nav div

于 2012-12-21T15:54:33.370 に答える
2

スタイル ルールはうまく機能しますdisplay: inline-blockが、いくつかの欠点があります。詳細については、CSS display: inline-block: なぜうまくいくのか、なぜうまくいかないのかを参照してください。

また、ナビゲーション要素には div の代わりにリストを使用することをお勧めします。これは、(うまくいけば) より明確なマークアップをもたらす一般的な戦略です。

于 2012-12-21T15:55:16.863 に答える
2

外側の div でclearfixソリューションを使用することをお勧めします#div。次にfloat:left、すべての#nav div子供たちについて。

于 2012-12-21T15:57:45.863 に答える