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>после третьего <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)?элементов или это невозможно? Если вы уверены, что это невозможно, это приемлемый ответ.

Я был в состоянии заставить это работать на встроенных элементах LI. К сожалению, это не работает, если элементы LI являются inline-block:

Живая демоверсия: http://jsfiddle.net/dWkdp/

Или версия примечаний утеса:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}

Вас не интересует множество «решений» вашей проблемы. Я не думаю, что действительно есть хороший способ сделать то, что вы хотите сделать. Все, что вы вставляете, использует :afterи contentимеет точно такую ​​же синтаксическую и семантическую достоверность, как если бы вы только что написали это сами.

Инструменты CSS обеспечивают работу. Вы должны просто вспомнить lis и затем, clear: leftкогда вы хотите начать новую строку, как вы уже упоминали:

Смотрите пример: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Когда разрешено переписывание html, вы можете вкладывать <ul>s внутри <ul>и просто <li>показывать внутренний s как inline-block. Это также семантически имеет смысл ИМХО, так как группировка также отражена в html.

<ul>
    <li>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </li>
</ul>

li li { display:inline-block; }

демонстрация

$(function() { $('img').attr('src', 'http://phrogz.net/tmp/alphaball.png'); });

h3 {
  border-bottom: 1px solid #ccc;
  font-family: sans-serif;
  font-weight: bold;
}
ul {
  margin: 0.5em auto;
  list-style-type: none;
}
li li {
  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;
}
img {
  width: 64px;
  display: block;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Features</h3>
<ul>
  <li>
    <ul>
      <li><img />Smells Good</li>
      <li><img />Tastes Great</li>
      <li><img />Delicious</li>
    </ul>
  </li>
  <li>
    <ul>
      <li><img />Wholesome</li>
      <li><img />Eats Children</li>
      <li><img />Yo' Mama</li>
    </ul>
  </li>
</ul>

Простой способ разбить списки на строки - плавать отдельные элементы списка, а затем элемент, который вы хотите перейти на следующую строку, вы можете очистить с плавающей точкой.

например

<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>

Я знаю, что вы не хотели использовать поплавки, и вопрос был просто теоретическим, но в случае, если кто-то посчитает это полезным, вот решение с использованием поплавков.

Добавьте класс left к вашим liэлементам, которые вы хотите плавать:

<li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>

и измените ваш CSS следующим образом:

li { text-align:center; float: left; clear: left; padding:0.1em 1em }
.left {float: left; clear: none;}

http://jsfiddle.net/chut319/xJ3pe/

Вам не нужно указывать ширину или встроенные блоки, и это работает еще в IE6.

Я достиг этого, создав селектор :: before для первого встроенного элемента в строке и сделав этот селектор блоком с верхним или нижним полем для небольшого разделения строк.

.1st_item::before
{
  content:"";
  display:block;
  margin-top: 5px;
}

.1st_item
{
  color:orange;
  font-weight: bold;
  margin-right: 1em;
}

.2nd_item
{
  color: blue;
}

Обратите внимание, что это будет работать, в зависимости от того, как вы отображаете страницу. Но как насчет того, чтобы начать новый неупорядоченный список?

т.е.

<ul>
<li>
<li>
<li>
</ul>
<!-- start a new ul to line break it -->
<ul>

Лучшее решение - использовать -webkit-columns: 2;

http://jsfiddle.net/YMN7U/889/

 ul { margin:0.5em auto;
-webkit-columns:2;
}

Может быть, это полностью возможно только с помощью CSS, но я предпочитаю избегать "float" столько, сколько могу, потому что это мешает росту его родителя.

Если вы используете jQuery, вы можете создать простой плагин `wrapN`, который похож на` wrapAll`, за исключением того, что он оборачивает только элементы "N", а затем разбивает и оборачивает следующие элементы "N" с помощью цикла. Затем установите свой класс-оболочку в `display: block;`.

(function ($) {
    $.fn.wrapN = function (wrapper, n, start) {
        if (wrapper === undefined || n === undefined) return false;
        if (start === undefined) start = 0;
        for (var i = start; i < $(this).size(); i += n)
           $(this).slice(i, i + n).wrapAll(wrapper);
        return this;
    };
}(jQuery));

$(document).ready(function () {
    $("li").wrapN("<span class='break' />", 3);
});

Вот JSFiddle готового продукта:

http://jsfiddle.net/dustinpoissant/L79ahLoz/