9
CSS在特定“ inline-block”项之前/之后换行
假设我有以下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)?元素中间插入换行符吗，还是不可能？如果您确定这是不可能的，那是可以接受的答案。