CSS在特定`inline-block`项之前/之后换行

Question

假设我有这个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>在第三列之后注入一个<li>.(实际上这样做在语义和语法上都是无效的.)

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

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

我也知道这个特殊情况可以通过float代替使用inline-block,但我对使用的解决方案不感兴趣float.我也知道,对于固定宽度的块,可以通过将父级的宽度设置为宽度的ul3倍来实现.我对这个解决方案不感兴趣.我也知道,display:table-cell如果我想要真正的列,我可以使用; 我对这个解决方案不感兴趣.我对在内联内容中强制中断的可能性感兴趣.

编辑:要清楚,我对"理论"感兴趣,而不是特定问题的解决方案.CSS可以在display:inline(-block)?元素中间注入换行符,还是不可能？如果你确定这是不可能的,这是一个可以接受的答案.

Answer 1

我已经能够使它适用于内联LI元素.不幸的是,如果LI元素是内联块,它不起作用:

现场演示: http : //jsfiddle.net/dWkdp/

或悬崖笔记版本:

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

Answer 2

您对问题的许多"解决方案"不感兴趣.我认为没有一个好方法可以做你想做的事情.任何你插入使用:after,并content具有完全相同的语法和语义的有效性,如果你刚写好它有它自己会做.

CSS工具提供了工作.你应该只是浮动lis然后clear: left当你想要开始一个新行时,正如你所提到的:

看一个例子:http://jsfiddle.net/marcuswhybrow/YMN7U/5/