1

私は自分のWebページ（Facebookなど）の上部に広がる「バー」を作成しようとしています。次に、右側にいくつかのナビゲーションリンクがあります。ただし、ページのサイズを変更してから水平スクロールバーを使用すると、赤い背景が表示されなくなります。

http://jsfiddle.net/ejJnL/embedded/result/

http://jsfiddle.net/ejJnL/

<div class="header-container">
    <div class="header">
        <ul class="main-navigation">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

CSS：

.header-container {
    background-color: red;
    height: 40px;
    width: 100%;
}

.header {
    height: 100%;
    line-height: 40px;
    margin: 0 auto;
    width: 960px;
}

.header img {
    vertical-align: middle;
}

.main-navigation {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    float: left;
}

.main-navigation a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}
4

2 に答える 2

0

http://jsfiddle.net/SbpZG/

.header-containerおよびposition: relativeの固定幅.main-navigation

于 2012-04-09T20:47:50.547 に答える
0 
.header-container {
    background-color: red;
    height: 40px;
    position: fixed:
    left: 0;
    right: 0;
}

  1. 位置を固定し、上図のようにビューポートの左端と右端にアタッチされていることを宣言します。

  2. width: 100% または height: 100% の宣言は必要ありません。div既にブロック要素があり、それらのコンテナーを埋めます。

  3. body { margin:0}バーをページの端まで伸ばすかどうかを宣言する必要があります。

  4. メニューが小さなウィンドウに表示されるように、おそらくmax-widthnotwidthを使用する必要があります。.header

  5. に を追加することもできますoverflow: none。.header-container

于 2012-04-09T20:33:44.690 に答える