тим, у меня есть этот 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, Я также знаю, что с блоками фиксированной ширины это возможно, установив ширину родительского блокаul примерно в 3 раза больше этой ширины; Я не заинтересован в этом решении. Я также знаю, что я мог бы использоватьdisplay:table-cell если бы я хотел настоящие колонки; Я не заинтересован в этом решении. Меня интересует возможность принудительного перерыва внутри встроенного контента.

редактировать: Чтобы быть ясным, меня интересует «теория», а не решение конкретной проблемы.Может ли CSS ввести разрыв строки в серединеdisplay:inline(-block)? элементы, или это невозможно? Если вы уверены, что это невозможно, это приемлемый ответ.