インラインブロックリストの項目間にギャップがあるのはなぜですか?それを修正するにはどうすればよいですか?

インライン ブロック リスト項目の間隔の問題

クエリ:

シームレスなメニューを作成する努力にもかかわらず、インライン-ブロック リストの項目間に顕著なスペースが表示される

解決策:

この間隔は、フォント設定の影響を受け、インライン ブロック プロパティの空白に依存する性質により発生します。元々、これは各アイテム間に 4 ピクセルのスペースをレンダリングしました。

代替アプローチ:

方法 1:

• すべてのリスト項目を一度に実行するline.

方法 2:

• リスト項目の終了タグと開始タグをまとめてブロックします:

<ul>
    <li><div>first</div></li><li><div>first</div></li>
    <li><div>first</div></li><li><div>first</div></li>
</ul>

最適解決策:

• フォント サイズ: 0 を追加します。

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

このアプローチでは、フォントのデフォルト設定によって生じる不要なスペースを排除しながら、HTML の読みやすさを維持します。

以上がインラインブロックリストの項目間にギャップがあるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。