CSS to line break avant / après un élément `inline-block` particulier

Disons que j’ai ce HTML:

Features

  • Smells Good
  • Tastes Great
  • Delicious
  • Wholesome
  • Eats Children
  • Yo' Mama

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 diviser ce nombre en trois colonnes, ce qui équivaut à injecter un
après le troisième

  • . (En fait, ce serait sémantiquement et syntaxiquement invalide.)

    Je sais comment sélectionner le troisième

  • en CSS, mais comment puis-je forcer un saut de ligne après cela? 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 aussi qu’avec des blocs à largeur fixe, cela est possible en réglant la largeur sur le parent ul à environ 3 fois cette largeur; Je ne suis pas intéressé par cette solution. Je sais aussi que je pourrais utiliser display:table-cell si je voulais de vraies colonnes; Je ne suis pas intéressé par cette solution. Je suis intéressé par la possibilité de forcer une pause dans le contenu en ligne.

    Edit : Pour être clair, je m’intéresse à la «théorie» et non à la solution à un problème particulier. CSS peut-il injecter un saut de ligne au milieu de l’ display:inline(-block)? éléments, ou est-ce impossible? Si vous êtes certain que c’est impossible, c’est une réponse acceptable.

  • Vous n’êtes pas intéressé par beaucoup de “solutions” à votre problème. Je ne pense pas qu’il y ait vraiment un bon moyen de faire ce que vous voulez faire. Tout ce que vous insérez en utilisant :after et content a exactement la même validité syntaxique et sémantique que si vous l’aviez écrit vous-même.

    Les outils CSS fournissent du travail. Vous devriez juste faire flotter les li s puis les clear: left quand vous voulez commencer une nouvelle ligne, comme vous l’avez mentionné:

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

    Un moyen facile de diviser les listes en lignes est de faire flotter les éléments de la liste individuelle, puis l’élément que vous souhaitez faire passer à la ligne suivante vous permet d’effacer le flottant.

    par exemple

     
  • --- this will start on a new line
  • Lorsque la réécriture du HTML est autorisée, vous pouvez imbriquer

      s dans

        et laisser simplement le

      • interne afficher sous forme de bloc en ligne. Cela aurait aussi sémantiquement un sens à mon humble avis, car le regroupement est également reflété dans le HTML.


         
          • Item 1
          • Item 2
          • Item 3
          • Item 4
          • Item 5
          • Item 6

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

        Features

          • Smells Good
          • Tastes Great
          • Delicious
          • Wholesome
          • Eats Children
          • Yo' Mama

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

        Ajoutez une classe de gauche à vos éléments li que vous souhaitez faire flotter:

         
      • Smells Good
      • 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 des largeurs ou des blocs en ligne et vous travaillez aussi loin que IE6.

        Peut-être que c’est complètement possible avec seulement CSS mais je préfère éviter autant que possible de “flotter” car cela interfère avec la taille de son parent.

        Si vous utilisez jQuery, vous pouvez créer un simple plugin `wrapN` similaire à` wrapAll`, sauf qu’il ne fait qu’emballer les éléments «N», puis interrompt et encapsule les éléments «N» suivants à l’aide d’une boucle. Ensuite, définissez votre classe wrappers sur `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("", 3); }); 

        Voici un JSFiddle du produit fini:

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

        Une meilleure solution consiste à utiliser -webkit-columns: 2;

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

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