Digamos que eu tenho esse 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>
e este CSS:
li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }
O resultado pode ser visto aqui: http://jsfiddle.net/YMN7U/1/
Agora imagine que eu quero dividir isso em três colunas, o equivalente a injetar um <br>
após o terceiro <li>
. (Na verdade, fazer isso seria semanticamente e sintaticamente inválido.)
Eu sei como selecionar o terceiro <li>
no CSS, mas como forçar uma quebra de linha depois dele? Isso não funciona:
li:nth-child(4):after { content:"xxx"; display:block }
Também sei que esse caso em particular é possível usando em float
vez de inline-block
, mas não estou interessado em soluções usando float
. Eu também sei que com blocos de largura fixa isso é possível definindo a largura no pai ul
como cerca de 3x essa largura; Não estou interessado nesta solução. Também sei que poderia usar display:table-cell
se quisesse colunas reais; Não estou interessado nesta solução. Estou interessado na possibilidade de forçar uma quebra no conteúdo embutido.
Edit : Para ser claro, estou interessado em 'teoria', não a solução para um problema específico. O CSS pode injetar uma quebra de linha no meio dos display:inline(-block)?
elementos ou é impossível? Se você tem certeza de que é impossível, essa é uma resposta aceitável.