html - CSS ナビゲーションバーの色を画面の端まで伸ばす

Question

私のナビゲーションバーは 1024px で、画面の中央に浮かんでいます。ナビゲーションバーの色を画面の左側まで持ち込もうとしています。ナビゲーションバーの右側に、5px のオレンジ色を画面の右側にずっと配置したいと考えています。

.orangebar {
    background-color:#f36f21;
    height:5px;
}

この問題の単純化されたバージョンを jsFiddle で作成しました (簡単な編集用)。 http://jsfiddle.net/CKZhV

これを達成しようとしています： ここに画像の説明を入力

問題の写真: ここに画像の説明を入力

score 1 · Accepted Answer

作業バージョン: http://jsfiddle.net/CKZhV/3/ (入力に基づいて更新されたものを参照)

このリセットを CSS に追加します。

* {
    margin: 0;
    padding: 0;
}

更新された写真を見て、問題が明確になりました。あなたの新しい入力に基づいて私の答えを編集しました。

コンテナーに 1024 ピクセルの固定幅ではなく最小幅を指定し、メニューバーと一致する背景色を追加することをお勧めします。

次に、それを左にフロートさせ、コンテンツを右にフロートさせることができます。もう必要ありmargin:0 auto;ません。

更新された作業バージョンは次のとおりです: http://jsfiddle.net/CKZhV/10/

score 1 · Accepted Answer

問題は、メニューがオーバーフロー<body/>して<html/>. その結果、ウィンドウ幅.orangebarである幅を使用するだけです。<body/>スクロールしても残りが表示されないのはそのためです。

あなたはそれに与えることができますmin-width：

.orangebar {
    min-width: 1024px;
}

基本的にはお勧めしませんが、すでにメニューの幅が固定されているので問題ありません。

score 1 · Accepted Answer

あなたのフィドルを編集しましたhttp://jsfiddle.net/kevinPHPkevin/CKZhV/6/

#navbar {
    width:50%;
    text-align:right;
    float:right;
    background:#14325c;
    color:#fff;
}

score 0 · Accepted Answer

このフィドルを確認してください。.main-nav に 50% の幅と背景色を指定しました。このフィドルは機能しますが、親 div のように画面までは行きませんmargin: 0 auto。

マージンを削除すると、目的のソリューションが得られる場合があります。フィドルを見る

5 に答える 5