0

ナビゲーションバーを作成しようとしましたが、何らかの理由で小さなギャップがあり、マージンを使用してギャップを閉じようとすると、反対側のギャップが開きます。妥協点を見つけようとすると、代わりに左右に2つのギャップが生じます。どうやらナビゲーションバーで上部エリア全体を完全にカバーすることは不可能のようです。

例へのリンク:

http://jsfiddle.net/Vk5Md/3/

そして、私は体をマージンで修正しなければなりませんでした。そうしないと、上部にも隙間ができてしまいます。それを解決する別の方法はありますか?

body {
    background-image:url('../images/subtle_grunge.png');
    background-repeat:repeat;
    margin-left: 4px;
    margin-right: 0px;
    margin-top: 0px;
}

基本的に、アドレスバー、ブラウザーの左側、右側のスクローラーの間にギャップがない、スタックオーバーフローのナビゲーションバーのようにナビゲーションバーを表示したいと思います。

4

6 に答える 6

0

表示されるスペースはbody、一部のブラウザではhtml. この 2 つの要素に対してmarginとpaddingを設定するだけです。0

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

RAW 実装のデモ:

Working FIDDLE Demoあなたのデモのために。

于 2013-05-16T06:39:51.980 に答える
0

これはあなたが達成しようとしていることですか？完全にフィドルアップして、ナビゲーションバーで上部領域全体をカバーしますか?

ここに画像の説明を入力 

<body>
    <form id="form1" runat="server">
        <div id="wrapper">
            <!-- Navbar==================================================- ->
<div id="nav">
     <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Crawler</a></li>
          <li><a href="#">Visual Analytics</a>
          </li> 
     </ul> 
</div>
</div> 
    </form>
</body>



body {
    background-image:url('../images/subtle_grunge.png');
    background-repeat:repeat;
}
#wrapper {
    margin: 0 auto;
    width: 1000px;
    height:100%;
    text-align: left;
}
#nav {
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    height:auto;
    width:100%;
    background-color:#b11d1d;
    text-align: center;
    opacity:0.5;
}
#nav ul {
    list-style-type: none;
    padding: 0;
}
#nav li {
    display:inline;
}
#nav li a {
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    background-color:#b11d1d;
    float:left;
}
#nav li a:hover {
    color: #FFFFFF;
    background-color: #35af3b;
}


注: ナビゲーションの幅を広げたい場合はpadding-left:#px; padding-right:#px;、#nav li a

于 2013-05-16T06:54:04.853 に答える