假设我有这样的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)?
元素中间注入换行符,还是不可能?如果你确定这是不可能的,这是一个可以接受的答案。