ホームページ > 記事 > ウェブフロントエンド > display:inline-block; レイアウトによって生じるギャップを解決する CSS メソッド
display:inline-block; レイアウトによって生じるギャップを解決する CSS メソッド
- 巴扎黑オリジナル
- 2017-05-21 10:38:101762ブラウズ
この記事ではdisplay:inline-block;によるズレ（隙間）を解決するCSSの方法を中心に紹介していますので、必要な方は参考にしてください。
今日、H5の横スライドカードを作成するときにdisplay:inline-blockを使用しましたが、同じ水平線上の要素間に隙間があることがわかり、これは明らかに望んでいた効果ではないことがわかり、左側のフロートを置き換えることに変更しました。 、ギャップの問題は解決されますが、水平左右スクロールを実現するには親要素の幅を設定する必要があり、コード量が増加します。カードの数は固定されていないため、親要素の幅を設定する必要があります。 JS をリアルタイムに設定する必要があるため、コード量が増加し、最適な選択ではありません。最善の解決策は、display:inline-block; を使用することであると思われるため、ギャップの問題が発生します。コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>document</title>
<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<p class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</p>
</body>
</html>効果は次のとおりです:
このギャップは明らかに仕様に準拠しており、line によって発生する空白文字によって引き起こされると言われています。休憩します。しかし、この効果は明らかに私たちが望むものではありません。私たちが望むギャップは、実際のニーズに応じて設定されたマージンです。では、このギャップを解消するにはどうすればよいでしょうか? 3 つの方法があります:
方法 1: 要素間に改行はありません。コードは次のとおりです:
<p class="box"> <span>111</span><span>111</span><span>111</span><span>111</span> </p>
効果は次のとおりです:
方法 2: font-size をその親要素に設定します。 :0;実際に必要なフォント サイズにそれ自体を設定します。残念なのは、Chrome や Opera などの一部のブラウザには最小フォント設定があることですが、現在の Chrome にはこの設定がないようです:
css:
.box{overflow-x:auto;background:#fff;white-space:nowrap;font-size:0;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;font-size:14px;}html:
<p class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</p>効果は以下の通り:
方法 3: マイナスマージン方法 このギャップはフォントサイズに関係するため、ギャップは特定の値ではないことに注意してください。
上記の 3 つの方法のうち、最初の 2 つはより良い解決策であり、3 番目の方法はお勧めできません。オンラインには他の解決策もありますが、最初の 2 つの方が優れていると思います。
追記:
大多数のフロントエンド専門家のコメントや提案と組み合わせると、display:flex を親要素に設定してギャップをなくすこともでき、コードの量は少なくなりますが、効果で使用することができます。要素がすべてビジュアル ウィンドウ内にあるため、水平方向の左右のスライドは実現できません。
以上がdisplay:inline-block; レイアウトによって生じるギャップを解決する CSS メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。