ホームページ > ウェブフロントエンド > CSSチュートリアル > インラインブロックリスト項目間の不要なスペースを削除するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-12-17 21:26:15
オリジナル
575 人が閲覧しました

How Can I Eliminate Unwanted Spaces Between Inline-Block List Items?

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

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

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

  • まとめてブロックする: リスト項目を 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート