在特定的`inline之前/之后，用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/
现在想象一下，我想把它分成三列，相当于在第三个<li>之后注入一个<br> 。 （实际上，这样做在语义和语法上都是无效的。）
我知道如何在CSS中选择第三个<li> ，但是如何在它之后强制换行？ 这不起作用：
li:nth-child(4):after { content:"xxx"; display:block }
我也知道这种情况可以通过使用float而不是inline-block ，但我对使用float解决方案不感兴趣。 我也知道，使用固定宽度的块可以通过将父ul的宽度设置为该宽度的3倍来实现; 我对这个解决方案不感兴趣。 我也知道如果我想要真正的列，我可以使用display:table-cell ; 我对这个解决方案不感兴趣。 我对在内联内容中强行休息的可能性感兴趣。
编辑 ：要清楚，我对'理论'感兴趣，而不是对特定问题的解决方案。 CSS可以在display:inline(-block)?中间注入换行符display:inline(-block)? 元素，还是不可能？ 如果你确定这是不可能的，那是一个可以接受的答案。
我已经能够使它在内联LI元素上工作。 不幸的是，如果LI元素是内嵌块，它不起作用：
现场演示： http : //jsfiddle.net/dWkdp/
或悬崖笔记版本：
li {
display: inline;
}
li:nth-child(3):after {
content: "A";
white-space: pre;
}
你对你的问题很多“解决方案”不感兴趣。 我不认为真的有一个好方法来做你想做的事。 您插入的任何content :after和content具有完全相同的句法和语义效度，如果您自己将它们写在那里，它会完成。
CSS提供的工具。 你应该浮动li s然后clear: left当你想要开始一个新行时，就像你刚才提到的那样：
看一个例子：http://jsfiddle.net/marcuswhybrow/YMN7U/5/
将列表拆分成行的一种简单方法是通过浮动单个列表项目，然后将想要转到下一行的项目清除浮动。
例如
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block; clear: both"></li> --- this will start on a new line
<li style="float: left; display: inline-block"></li>
<li style="float: left; display: inline-block"></li>
上一篇: CSS to line break before/after a particular `inline
下一篇: How do I center an image if it's wider than its container?