css - ギャップがビューポートの後ろにクリップできるように、インラインブロック div 要素間のギャップを制御する方法は?

Question

たとえば、 と を使用display: inline-blockして 2 つの要素のmargin-right: 20pxスタイルを設定すると、ウィンドウ フレームのサイズが変更されて右マージンに達すると、2 番目の要素が途中で次の行にジャンプします。divdiv

この問題を回避する簡単な方法はありますか?

Answer 1

質問は完全に明確ではありませんが、エリックの答えがあなたが知る必要があることを教えてくれない場合、これがあなたの問題かもしれません:

要素を inline-block に設定すると、ソース内の要素間の空白 (改行を含む) が間隔に影響します。それが起こっていることに気付くまで、それは微妙で非常にイライラします。

考えられる解決策は 2 つあります。

1) ソース コード内ですべてを 1 行に並べ、間にスペースを入れないでください。これは読みにくいため、通常は理想的ではありません。

2) HTML コメントを使用して、ブラウザがそれらの間のスペースを無視するようにします。CSS トリックを使用するのではなく、HTML を変更する必要があるため、理想的ではありませんが、機能します。

たとえば、li 要素をインライン ブロックにする場合は、次のようにします。

<ul>
    <li>Item 1</li><!--
 --><li>Item 2</li><!--
 --><li>Item 3</li>
</ul>

Answer 2

margin-right: -20pxコンテナに追加