インラインブロックリスト項目間の不要なスペースを削除するにはどうすればよいですか?

インライン ブロック リスト項目の空白スペースが解決されました

インライン ブロック リスト項目の間に不要なスペースが表示されることがよくあります。この問題は、インライン ブロック要素の空白に依存する性質とフォントの間隔設定が原因で発生します。

これを解決するには、次の対策を検討してください:

• まとめてブロックする: リスト項目を 1 行に結合して、最適な間隔を確保します。
• 結合タグ: リスト項目タグをまとめてラップし、各項目間のスペースを削除します:

<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;
}

このメソッドは、親要素のフォント間隔をリセットし、個々のリスト項目に対して個別に調整します。コンテンツ。

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