[解決済み】特定の `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> . (実際にそうすると、意味的にも構文的にも無効です）。

3番目の選択方法を知っている <li> の後に強制的に改行させるにはどうしたらいいのでしょうか？これではうまくいきません。

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

また、このような特殊なケースは float の代わりに inline-block を使用したソリューションには興味がありません。 float . また、固定幅のブロックでは、親ブロックの幅を設定することで可能であることも知っています。 ul この解決策には興味がありません。また display:table-cell 本当の列が必要なら、この解決策に興味はありません。私は、インラインコンテンツ内で強制的に改行できる可能性に興味があるのです。

編集 : はっきり言って、私は「理論」に興味があるのであって、特定の問題に対する解決策に興味があるわけではありません。 の途中にCSSで改行を入れることはできますか？ display:inline(-block)? それとも不可能ですか？ 不可能であることが確実であれば、それは許容範囲内の答えです。

どのように解決するのですか？

インラインのLI要素で動作させることができました。残念ながら、LI要素がinline-blockの場合は動作しません。

ライブデモの様子です。 http://jsfiddle.net/dWkdp/

クリフノート版でもいい。

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