3 
<nav id="main_nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>

#main_nav{
    background:green;
}

#main_nav li{
    display:inline-block;
    list-style:none;
    padding:10px;
    font-weight:bold;
}
#main_nav li a{
    text-decoration: none;
    color:white;
    padding:10px;
}

#main_nav li{
    -webkit-transition: opacity .5s, background .5s, color .5s;
    -moz-transition: opacity .5s, background .5s, color .5s;
    -o-transition: opacity .5s, background .5s, color .5s;
}

#main_nav li:hover{
    color:red;
    background:rgba(0, 0, 200,.5);
}

これは私のナビゲーションバーですが、問題があります。各リンクの間には小さなスペースがあります。すばやくカーソルを合わせると、見栄えがよくありません。どうすれば削除できますか？

4

7 に答える 7

11

いくつかの方法：

  • リストアイテム間の空白を削除します（jsFiddleの例）
  • コメント（<!-- -->）を使用して空白のギャップを占有します（jsFiddleの例）
  • 次の行のリストアイテムタグを閉じます（jsFiddleの例）

要素のフォントサイズをゼロに設定してから、アンカーのフォントサイズをより大きな値に設定できる4番目のオプションもありますが#main_nav、この手法を使用したAndroidの以前のビルドには問題がありました。jsFiddleの例。

于 2013-02-12T15:34:54.257 に答える
2

display:inline-block;これは、list要素に使用するときに発生します。float:leftマージン/パディングを使用または操作する必要があります

于 2013-02-12T15:34:56.223 に答える
1

このフィドルを参照してください：http：//jsfiddle.net/zteA7/

これは、インラインブロック作成スペースのためです。

要素をフロート<li>にし、CSS:afterセレクターを使用して、より明確なブロック要素を挿入し、navブロックをメニューの高さにします。（HTMLは必要ありません）。

また、コンテナの高さを指定する必要はありません。これは、改行が機能することを意味します。

于 2013-02-12T15:41:42.530 に答える
1

アレンジall the list in single lineするとスペースが削除されます...

<li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Forum</a></li><li><a href="#">Contact Us</a></li>

更新されたフィドル：http：//jsfiddle.net/RYh7U/78/

于 2013-02-12T15:43:30.343 に答える
0 
#main_nav li{
    display:inline-block;  /* the new web designer disease ?? */
    list-style:none;
    padding:10px;
    font-weight:bold;
    margin:0;
}

このようにHTMLを書き直してください

<ul>
    <li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Forum</a></li><li><a href="#">Contact Us</a></li>
</ul>
于 2013-02-12T15:37:02.887 に答える
0

これは、プロパティdisplay: inline-block;が原因で、li「ブロック」が引き続きインライン要素として動作するため、それらの間にスペースが構築されます。私はこの問題を数回経験しましたが、2つの（それほど美しくはない）解決策を知っています：

  1. li要素float: leftを作成しますが、デザインの残りの部分を台無しにしないように注意してください。
  2. 要素間にスペースを埋めるhtmlコメントを書き込んでli、ブラウザが要素間に「スペース」を認識しないようにします。
于 2013-02-12T15:38:09.473 に答える
-1

<ul>タグからすべてのパディングを削除します。このような問題を回避するには、reset.cssを使用すると便利な場合がありますhttp://meyerweb.com/eric/tools/css/reset/

于 2013-02-12T15:31:49.237 に答える