0

並べ替えられていないリストを使用してある種のナビゲーション バーを作成し、その中にグラフィックスを含むリスト項目を作成しようとしていますが、項目の上にカーソルを置くと、背景色が領域全体をカバーしていないか、各項目の間に少しのスペースがあります..

4

3 に答える 3

3

表示されているギャップは、マークアップの空白が原因です。float とは異なり、inline-block実際には HTML の空白を尊重します。したがって、最も簡単な解決策は、空のコメントを追加するか、次のように各<li>アイテム間にスペースを入れないようにすることです。

<ul id="navbar">
    <li><div class="refresh"></div></li><li><div class="settings"></div></li><li><div class="s_res"></div></li><li><div class="h_res"></div></li>
</ul>

より詳細な説明とその他の代替修正については、この CSS トリックの記事を参照してください。

inline-blockNathan Lee の解決策は 1 つのオプション (に置き換えるtable-cell) ですが、その変更には他の結果があることに注意する必要があります (それを気にする場合は IE7 のサポートの欠如だけでなく、違いvertical-alignなどもあります)。

マークアップを修正できない場合は、マイナスのマージンで目的を達成できます。ただし、-4px実際には使用しているフォントに依存するため、多少異なる必要がある場合があります。それはいつもちょっとしたハックのように感じます. これが代替手段よりも脆弱である理由の例については、このフィドルを確認してください。

于 2013-10-24T11:47:24.333 に答える
1

これが解決策です。以下のcssをあなたのものに置き換えるだけです。

ul#navbar li {
    border-right: 2px solid #FF9000;
    display: table-cell;
    margin: 0;
    padding: 14px;
}

ワーキングデモ

お役に立てれば。

于 2013-10-24T11:43:03.893 に答える