html - 水平メニューのリンク間の奇妙なスペースを識別できない

Question

シンプルな水平メニューを作成しています。項目にカーソルを合わせると背景色が変わりますが、リンクの左側に奇妙な 3 ピクセルのスペースが残り、なぜそれが表示されるのか、どのように削除するのかを特定できません。

メニューはこちら: http://pokerzysta.site44.com/ ( Linki, Posty, Forum, Dodaj) 何が問題なのですか?

Answer 1

それは、 でリストを横方向に表示しているためですdisplay: inline-block;。HTML マークアップの空白が表示されます (ほとんどの場合、li タグの後の改行)。

空白と改行なしで HTML に li タグを配置すると、これは発生しません。

<ul id="main-menu" class="horizontal-list fleft">
    <li><a href="#">Linki</a></li><li><a href="#">Posty</a></li><li><a href="#">Forum</a></li><li><a href="#">Dodaj</a><li>
</ul>

@cimmanon は、リスト ナビゲーションの水平方向の表示に関する Chris Coyier による素晴らしい記事を指摘しました: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

LI 要素の間に空白があります。それらを削除するか、使用することにより

float: left;

問題も解決します（ただし、ULの後にはクリアを使用する必要があります：両方）

Answer 3

リンクはインライン ブロックであるため、HTML の空白は実際にはスペースを使用します ;) 簡単なトリックは、ul で font-size を 0 に設定し、li で正しいフォント サイズをリセットすることです。

あなたの場合：

.horizontal-list {
   font-size: 0;
}

.horizontal-list li{
   font-size: 17px;
}