☰

特定の `inline-block` 項目の前/後に改行する CSS 質問する

tag-icon • tag-icon html css
特定の `inline-block` 項目の前/後に改行する CSS 質問する

次のような HTML があるとします。

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

そしてこの CSS:

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

結果はここで見ることができます:http://jsfiddle.net/YMN7U/1/

ここで、これを 3 つの列に分割するとします。これは、<br>3 番目の の後にを挿入するのと同じです<li>。(実際にそうすることは意味的にも構文的にも無効になります。)

CSS で3 番目を選択する方法はわかっています<li>が、その後に強制的に改行するにはどうすればよいでしょうか。これは機能しません。

li:nth-child(4):after { content:"xxx"; display:block }

また、この特定のケースはfloatの代わりにを使用することで可能であることも知っていますinline-blockが、 を使用するソリューションには興味がありませんfloat。また、固定幅のブロックでは、親の幅をulその幅の約 3 倍に設定することでこれが可能であることも知っていますが、このソリューションには興味がありません。また、実際の列が必要な場合は を使用できることも知っていますがdisplay:table-cell、このソリューションには興味がありません。インライン コンテンツ内で強制的に改行する可能性に興味があります。

編集明確に言うと、私が興味を持っているのは「理論」であり、特定の問題の解決策ではありません。CSS は要素の途中に改行を挿入できますかdisplay:inline(-block)?、それとも不可能ですか?それが不可能であると確信しているのであれば、それは受け入れられる答えです。

ベストアンサー1

インライン LI 要素では動作するようにできました。残念ながら、LI 要素がインライン ブロックの場合は動作しません。

ライブデモ: http://jsfiddle.net/dWkdp/

または、要約版:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}

おすすめ記事