ホームページ > 記事 > ウェブフロントエンド > CSSレイアウトのdisplay:inline-blockによるズレを解決する方法を詳しく解説
CSSレイアウトのdisplay:inline-blockによるズレを解決する方法を詳しく解説
- 伊谢尔伦オリジナル
- 2017-05-30 13:42:271989ブラウズ
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>効果は次のとおりです。
このギャップは明らかに存在しており、このパフォーマンスは仕様に準拠しており、改行によって生じる空白文字によって引き起こされると言われています。しかし、この効果は明らかに私たちが望むものではありません。私たちが望むギャップは、実際のニーズに応じて設定されたマージンです。では、このギャップを解消するにはどうすればよいでしょうか? 3 つの方法があります:
方法 1: 要素間に改行はありません。コードは次のとおりです:
<p class="box"> <span>111</span><span>111</span><span>111</span><span>111</span> </p>
効果は次のとおりです:
方法 2: フォントを設定する- 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 つの方が優れていると思います。
以上がCSSレイアウトのdisplay:inline-blockによるズレを解決する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。