CSS pour le saut de ligne avant/après un élément `inline-block` particulier

Question

Disons que j'ai ce 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>

et ce CSS :

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

Le résultat peut être vu ici : http://jsfiddle.net/YMN7U/1/

Imaginons maintenant que je veuille le diviser en trois colonnes, l'équivalent d'injecter un <br> après le troisième <li> . (En fait, faire cela serait sémantiquement et syntaxiquement invalide).

Je sais comment sélectionner le troisième <li> en CSS, mais comment faire pour imposer un saut de ligne après celui-ci ? Cela ne fonctionne pas :

li:nth-child(4):after { content:"xxx"; display:block }

Je sais aussi que ce cas particulier est possible en utilisant float au lieu de inline-block mais je ne suis pas intéressé par les solutions utilisant float . Je sais également qu'avec les blocs à largeur fixe, cela est possible en définissant la largeur du parent. ul à environ 3x cette largeur ; cette solution ne m'intéresse pas. Je sais également que je pourrais utiliser display:table-cell si je voulais de vraies colonnes ; cette solution ne m'intéresse pas. Je suis intéressé par la possibilité de forcer une rupture à l'intérieur du contenu en ligne.

Editar : Pour être clair, je m'intéresse à la "théorie", pas à la solution d'un problème particulier. Une CSS peut-elle injecter un saut de ligne au milieu de display:inline(-block)? éléments, ou est-ce impossible ? Si vous êtes certain que c'est impossible, c'est une réponse acceptable.

Answer 1

J'ai réussi à le faire fonctionner sur des éléments LI en ligne. Malheureusement, cela ne fonctionne pas si les éléments LI sont inline-block :

Démonstration en direct : http://jsfiddle.net/dWkdp/

Ou la version courte :

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

Answer 2

Vous n'êtes pas intéressé par un grand nombre de "solutions" à votre problème. Je ne pense pas qu'il y ait vraiment une bonne façon de faire ce que vous voulez faire. Tout ce que vous insérez en utilisant :after y content a exactement la même validité syntaxique et sémantique que si vous l'aviez écrit vous-même.

Les outils fournis par le CSS fonctionnent. Vous devriez simplement faire flotter le li et ensuite clear: left lorsque vous voulez commencer une nouvelle ligne, comme vous l'avez mentionné :

Voir un exemple : http://jsfiddle.net/marcuswhybrow/YMN7U/5/

Answer 3

Lorsque la réécriture du html est autorisée, vous pouvez imbriquer <ul> au sein de la <ul> et laisser l'intérieur <li> s s'affichent comme inline-block. Cela aurait également un sens sur le plan sémantique, puisque le regroupement est également reflété dans le code 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; }

---

Démo

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

Answer 4

Une façon simple de diviser des listes en lignes est de faire flotter les éléments individuels de la liste, puis d'effacer le flottement de l'élément que vous voulez faire passer à la ligne suivante.

par exemple

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

Answer 5

Je sais que vous ne souhaitiez pas utiliser de flottants et que la question n'était que théorique, mais au cas où quelqu'un trouverait cela utile, voici une solution utilisant des flottants.

Ajoutez une classe de gauche à votre li les éléments que vous voulez faire flotter :

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

et modifiez votre CSS comme suit :

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

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

Vous n'avez pas besoin de spécifier les largeurs ou les blocs inline et il fonctionne dès IE6.