0

できる限り検索しましたが、答えが見つからなかったようです。正しいキーワードを使用しなかったのは私かもしれません。

とにかく、単純なナビゲーション バーを作成し、幅 100% にしましたが、画面の右端をカバーしません。right:-5px; を使ってみました。しかし、それは役に立ちませんでした。

ここにjsfiddleがあるので、私のコードを見ることができます。

http://jsfiddle.net/xBkma/

CSS:

 #nav {
width: 100%;
float: left;
margin: 0 0 0 0;
padding: 0;
background-color: #F3B33C;
border-bottom: 4px solid #ccc;
position: absolute;
top: -1px;
left: -5px;
margin-right: -5px;
}

HTML

<div id="nav">
    <ul>
    <li><a id="home" href="index.html"> <img src="images/black home.png" width="28" height="28"></a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Database</a></li>
    </ul>
    </div>
4

7 に答える 7

0

まず第一に、使用しているときはフロートは必要ありませんposition: absolute;

次にナビゲーションに来て、まずブラウザのデフォルトのスタイルシートをリセットする必要があります。これを使用するだけです

* {
   margin: 0;
   padding: 0;
}

後でfromに変更left: -5px;すると、準備完了ですleft: 0;#nav

デモ

于 2013-04-11T13:51:37.860 に答える
0

http://jsfiddle.net/xBkma/4/left: -5pxに追加したものを削除するだけです#nav

于 2013-04-11T13:51:58.063 に答える
0

代わりに次のコードを試してください。

body{
    padding:0px;
    margin:0px;
}
#nav {
    width: 100%;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    background-color: #F3B33C;
    border-bottom: 4px solid #ccc;
    position: absolute;
    }

ほとんどのブラウザーでは、本文にパディングとマージンがあるように見えるので、それらをゼロに設定します

于 2013-04-11T13:52:30.340 に答える
0

nav 要素の margin-right および left プロパティを削除し、本文をマージン 0 に設定してみてください。

body{
 margin: 0;
}
于 2013-04-11T13:54:59.993 に答える
0

削除しleft: -5pxます。そしてさらに試みる

于 2013-04-11T13:51:21.457 に答える
0

box-sizing: border-box; を追加する必要があります。

そのようです

#nav {
width: 100%;
box-sizing: border-box;
float: left;
margin: 0 0 0 0;
padding: 0;
background-color: #F3B33C;
border-bottom: 4px solid #ccc;
position: absolute;
top: -1px;
left: -5px;
margin-right: -5px;
}

も追加body{padding: 0; margin: 0;}

作業フィドルhttp://jsfiddle.net/xBkma/8/

于 2013-04-11T13:53:58.277 に答える
0

削除する

位置: 絶対

ナビで。位置とフロートが矛盾しています。

http://jsfiddle.net/xBkma/6/

html, body {
    padding: 0;
    margin: 0;
}

#nav {
    width: 100%;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    background-color: #F3B33C;
    border-bottom: 4px solid #ccc;
}
于 2013-04-11T13:54:03.230 に答える