インライン要素リストで特定の項目の後に改行を強制する方法は?

インライン ブロック コンテンツでの改行

HTML コンテンツに、インライン ブロック li 要素を使用して表される項目のリストが含まれている状況を考えてみましょう。目的は、3 番目の li 項目の後に改行を挿入して 3 列効果を作成することです。

CSS の制限

前提として、改行を追加する必要があります。 CSS を使用して特定のインラインブロック要素間を直接接続することは実現できません。 content: "xxx" の :after 疑似要素を挿入し、display: block を使用したり、:nth-child で 3 番目の li を選択したりするような方法では十分ではありません。

インライン要素の回避策

ただし、li 要素が display: inline-block から display: inline に変更された場合には回避策があります。次のように CSS を追加すると、3 番目の li 要素の後に改行を挿入できます。

<code class="CSS">li { 
    display: inline; 
}
li:nth-child(3):after { 
    content: "\A";
    white-space: pre; 
}</code>

この例では、「A」によって改行が挿入され、white-space: pre によってインライン内に改行が保持されます。 context.

結論

CSS を使用してインライン ブロック要素間に改行を直接挿入することはできませんが、この回避策はインライン要素で実行可能であることを示しています。コンテンツを列に分割したり、インライン コンテンツ内のフローを変更したりする必要性に対する潜在的なソリューションを提供します。

以上がインライン要素リストで特定の項目の後に改行を強制する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。