1

CSS のコンテナーの幅は 100% ですが、ページの終わりの少し手前で止まります。

使用される HTML

<div id="nav-container">
    <ul id ="nav-list">
        <li id="nav-title">lymbo</li>
        <li><a href="#">Playmaps</a></li>
        <li><a href="../map.html">Map</a></li>
        <li><a href="../about.html">About</a></li>
        <li><a href="#">My Account</a></li>
        <li><a href="#">Log Out</a></li>
    </ul> 
</div>

使用される CSS

#nav-container {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    float: top;
    padding-top: 15px;
    text-align: left;
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    background-color: rgba(0, 70, 12, 0.5);
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
}

また、ヘッダーがナビゲーション バーに干渉し続ける理由を誰かが知っている場合は、ご意見をお聞かせください。ナビゲーション バーに、Twitter のナビゲーション バーのように少し「勾配」を持たせたいと思っていましたが、使用したチュートリアルはそれに近づきましたが、ダイスはありませんでした。

4

5 に答える 5

3

#nav-container で、次のようにマージンと位置制御を追加します。

#nav-container {
    margin:0px auto;
    left:0px;
    right:0px;
}

また、ナビゲーションにリストを使用しているため、リストの余白を制御する CSS を次のように追加する必要があります。

#nav-list {
    list-style-type:none;
    margin:0;
}

list-style-type:none;リスト内の箇条書きを削除します (必要な場合)。

<body>最後に、一部のブラウザーでは、次のように、タグでマージンをゼロに設定することが賢明な場合があります。

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
于 2013-05-29T15:50:51.720 に答える
1

left: 0;CSS に追加してみてください。floatまた、他の人が述べたように、プロパティは必要ありません。

于 2013-05-29T13:47:35.183 に答える
0

あなたは、適用されたnav-container別の div ( container-fluid)内にあるに違いありません。padding-left

于 2013-06-11T23:36:02.973 に答える
0

JSFiddle が表示されないため、テストできません。

しかし、divはすでにページの全幅にあると思います。まだページの 100% に達していないリストである可能性があります。そこにも width:100% を入れて、何が起こるか見てみましょう。

于 2013-05-29T13:44:38.497 に答える
0

デフォルトの要素には、周囲にスペースがあります。そのため、リセット スタイルを使用するのが一般的です。これをメインのスタイル シートの先頭に追加します。

* {
  margin: 0;
  padding: 0;
}
于 2013-06-11T23:42:28.997 に答える