CSS для переривання рядків до / після конкретного елемента "вбудований блок"

Скажімо, у мене є цей 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 вбудовані в блок:

Демо-версія: 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>в межах <ul>і просто дозволити внутрішній <li>дисплей s як вбудований блок. Це також має семантичний сенс IMHO, оскільки групування також відображається в 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>

Я знаю, що ви не хотіли використовувати поплавці, і питання полягало лише в теорії, але у випадку, якщо хтось вважає це корисним, ось рішення з використанням плавців.

Додайте клас ліворуч до 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.

Я досяг цього, створивши селектор :: перед першим вбудованим елементом у рядку та зробивши цей селектор блоком з верхнім або нижнім полем, щоб трохи розділити рядки.

.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-колонки: 2;

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

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

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

Якщо ви використовуєте 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/