假设我有这个 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/

现在想象一下，我想把它分成三列，相当于<br>在第三列之后注入 a <li>。 （实际上这样做在语义和句法上都是无效的。）

我知道如何<li>在 CSS 中选择第三个，但是如何在它之后强制换行？这不起作用：

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

我也知道这种特殊情况可以通过使用float而不是inline- block，但我对使用的解决方案不感兴趣float。我也知道，对于固定宽度的块，可以通过将父级的宽度设置为该宽度的ul3
倍左右；我对这个解决方案不感兴趣。我也知道display:table- cell如果我想要真正的专栏，我可以使用；我对这个解决方案不感兴趣。我对强制中断内联内容的可能性感兴趣。

编辑 ：明确地说，我对“理论”感兴趣，而不是特定问题的解决方案。
_CSS可以在元素中间注入换行符display:inline(-block)?，还是不可能？_如果您确定这是不可能的，那是可以接受的答案。