Кто бы хотел сделать веб-приложение, которое работает только в нескольких браузерах?

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

 Jake05 янв. 2011 г., 22:22
Похоже, вам нужно рассказать нам, чего вы на самом деле пытаетесь достичь, чтобы кто-то мог порекомендовать лучший метод. Все варианты, которые вы исключили, существуют для решения вашей проблемы. Зачем нужно другое решение?
 JakeParis05 янв. 2011 г., 22:22
Поместить первые три и вторые три в два разных списка? Я предполагаю, что ты не хочешь этого делать, но я думал, что бросил бы это там.
 Phrogz05 янв. 2011 г., 22:30
@ Джейк, на самом деле, я делал именно то, что говорил: использовал семантический список элементов и хотел обернуть некоторые из них. На практике я установил ширину контейнера, но это работает только в моем конкретном случае, потому что элементы оказались одинаковой ширины, и я хотел, чтобы они были обернуты по одному краю. Это не всегда так. Что я"действительно пытаюсь достичь" узнать, может ли CSS вызвать разрыв строки в середине встроенного потока. Уверенный ответ«Это определенно невозможно» приемлемо (если правильно).

Ответы на вопрос(9)

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

например

<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>
 Павел Иванов12 нояб. 2014 г., 09:22
если вы используете text-aling: center; это не будет работать (плавающий ломает его)
 Itay04 февр. 2014 г., 07:25
Вы должны заметить, чтоfloat настройка переопределяетinline-block установка. Они на самом деле не сосуществуют вместе

это полностью возможно только с помощью 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/

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

Добавьте класс слева к вашему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.

Когда переписывание HTML разрешено, вы можете вкладывать<ul>в пределах<ul> и просто пусть внутренний<li>s отображается как встроенный блок. Это также семантически имело бы смысл ИМХО, поскольку группировка также отражена в 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>

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

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

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

.2nd_item
{
  color: blue;
}
Решение Вопроса

сожалению, это не работает, если элементы LI являются inline-block:

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

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

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "\A";
     white-space: pre; 
}
 JakeParis05 янв. 2011 г., 22:44
Симе, почему "\ A" не распечатывается? Все, что я пробовал с:after всегда печатает как прямой текст.
 Šime Vidas05 янв. 2011 г., 23:05
@JMC Официальная спецификация:w3.org/TR/CSS21/syndata.html#strings Sitepoint:reference.sitepoint.com/css/content
 Šime Vidas05 янв. 2011 г., 22:47
@JMC\A это символ перевода строки ... это побег
 Phrogz05 янв. 2011 г., 22:46
@JMCCreative Это ASCII 0x0A, AKA символ LF (перевод строки). Видетьw3.org/TR/CSS2/syndata.html#strings
 user101089207 авг. 2013 г., 16:04
комментируя здесь, так как я продолжаю возвращаться к этому вопросу каждые несколько месяцев ... Это не сработает для встроенного блока, потому что вы добавляете разрывы строк внутри чего-то, что он действует как контейнерный блок во встроенном контексте. Если бы вы могли вырваться из контекста, вставив разрыв строки между <li>, это сработало бы. Позор действительно, поскольку это полезно для отзывчивых точек останова дизайна. Я думаю, что большую часть времени "inline" так же полезен, как inline-block для списков

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

 ul { margin:0.5em auto;
-webkit-columns:2;
}
 Phrogz20 июл. 2015 г., 17:51
Для некоторых случаев использования это может быть разумным решением. Это не очень хорошее решение в этом случае, потому что оно полностью переупорядочивает контент, чтобы он шел вниз, потом поперек, а не вниз.
 user286728824 окт. 2015 г., 18:10
Кто бы хотел сделать веб-приложение, которое работает только в нескольких браузерах?

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

то есть

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

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

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

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

 Marcus Whybrow05 янв. 2011 г., 22:26
Ну, вы ничего не можете сделать с помощью:after будет синтаксически верным или хорошей идеей, так как уже есть инструменты для этого. Отсюда и ответ.
 Šime Vidas05 янв. 2011 г., 22:23
ОП не заинтересован в вашем решении :)
 eyelidlessness23 мая 2012 г., 21:57
Одна из причин не использовать поплавки в том, что не существует такой вещи, какfloat: center.
 user101089207 авг. 2013 г., 15:34
плюс встроенный блок допускает все виды вертикального выравнивания, которые не могут плавать
 Rupert30 окт. 2013 г., 09:26
«Все, что вы вставляете с помощью: after и content, имеет точно такую ​​же синтаксическую и семантическую валидность», - опоздал на вечеринку, но я совершенно не согласен с этим, - весь смысл использования: before и: after заключается в возможности вставлять стили, которые не мешает смысловой смысл HTML.

Ваш ответ на вопрос