Ajouter un séparateur de conduite après les éléments d’une liste non ordonnée à moins que cet élément ne soit le dernier sur une ligne

Est-il possible de styler ce html

  • Dogs
  • Cats
  • Lions
  • Tigers
  • Zearm
  • Giraffes
  • Bears
  • Hippopotamuses
  • Antelopes
  • Unicorns
  • Seagulls

… comme ça …

entrer la description de l'image ici

… sans append de classes à des éléments de liste spécifiques, ou avoir recours au javascript? Et si oui comment?

Les sauts de ligne ne sont pas fixes. la liste s’élargit pour occuper plus d’espace et les éléments de liste sont alignés au centre.

C’est maintenant possible avec flex-box

Les clés de cette technique:

  • Un élément de conteneur défini pour overflow: hidden .
  • Set justify-content: space-between les ul (qui est une boîte à options) pour forcer ses éléments flexibles à s’étendre vers les bords gauche et droit.
  • Définissez margin-left: -1px sur ul pour que son bord gauche déborde le conteneur.
  • Définissez border-left: 1px sur les éléments flexibles li .

Le conteneur agit comme un masque dissimulant les bordures des éléments flexibles touchant son bord gauche.

 .flex-list { position: relative; margin: 1em; overflow: hidden; } .flex-list ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-left: -1px; } .flex-list li { flex-grow: 1; flex-basis: auto; margin: .25em 0; padding: 0 1em; text-align: center; border-left: 1px solid #ccc; background-color: #fff; } 
  
  • Dogs
  • Cats
  • Lions
  • Tigers
  • Zearm
  • Giraffes
  • Bears
  • Hippopotamuses
  • Antelopes
  • Unicorns
  • Seagulls

Juste

 li + li::before { content: " | "; } 

Bien sûr, cela ne résout pas le problème de l’OP. Il veut éliminer les barres verticales au début et à la fin des lignes, selon l’endroit où elles sont brisées. Je vais aller de l’avant et affirmer que ce problème n’est pas résolu avec CSS, et pas même avec JS, à moins de vouloir réécrire essentiellement la logique de mesure / mise en page / rupture de ligne du moteur de navigateur.

Les seuls morceaux de CSS, pour autant que je sache, qui “savent” à propos du saut de ligne sont, en premier lieu, le pseudo-élément ::first-line , qui ne nous aide pas ici – en tout cas, il est limité à un peu d’atsortingbuts de présentation, et ne fonctionne pas avec des choses comme :: avant et :: après. Le seul autre aspect de CSS que je peux imaginer dans une certaine mesure expose la rupture de ligne est la césure. Cependant, la césure consiste à append un caractère (généralement un tiret) à la fin des lignes dans certaines situations, alors que nous nous préoccupons ici de supprimer un caractère (la ligne verticale), donc je ne vois pas comment appliquer un caractère. de la logique liée à la césure, même à l’aide de propriétés telles que les caractères de hyphenate-character .

Nous avons la propriété d’ word-spacing des word-spacing , qui est appliquée intra-ligne mais pas au début et à la fin des lignes, ce qui semble prometteur, mais elle définit la largeur de l’espace entre les mots et non le ou les caractères à utiliser.

On se demande s’il existe un moyen d’utiliser la propriété text-overflow , qui a la capacité peu connue de prendre deux valeurs pour l’affichage du texte de débordement à gauche et à droite, comme dans

 text-overflow: '' ''; 

mais il ne semble toujours pas y avoir de moyen évident de passer de A à B ici.

Avant de montrer le code, il convient de mentionner que IE8 prend en charge :first-child mais pas :last-child , donc dans des situations similaires, vous devez utiliser la pseudo-classe :first-child .

Démo

 #menu{ list-style: none; } #menu li{ display: inline; padding: 0 10px; border-left: solid 1px black; } #menu li:first-child{ border-left: none; } 
  

Utiliser :after pseudo sélecteur. Regardez http://jsfiddle.net/A52T8/1/

 
  • Dogs
  • Cats
  • Lions
  • Tigers
  • Zearm
  • Giraffes
  • Bears
  • Hippopotamuses
  • Antelopes
  • Unicorns
  • Seagulls
ul li { float: left; } ul li:after { content: "|"; padding: 0 .5em; }

MODIFIER:

solution jQuery:

html:

 
  • Dogs
  • Cats
  • Lions
  • Tigers
  • Zearm
  • Giraffes
  • Bears
  • Hippopotamuses
  • Antelopes
  • Unicorns
  • Seagulls
  • Monkey
  • Hedgehog
  • Chicken
  • Rabbit
  • Gorilla

css:

 div { width: 300px; } ul li { float: left; border-right: 1px solid black; padding: 0 .5em; } ul li:last-child { border: 0; } 

jQuery

 var maxWidth = 300, // Your div max-width totalWidth = 0; $('#animals li').each(function(){ var currentWidth = $(this).outerWidth(), nextWidth = $(this).next().outerWidth(); totalWidth += currentWidth; if ( (totalWidth + nextWidth) > maxWidth ) { $(this).css('border', 'none'); totalWidth = 0; } }); 

Regardez ici. J’ai aussi ajouté quelques autres animaux. http://jsfiddle.net/A52T8/10/

Je sais que je suis un peu en retard pour la fête, mais si vous pouvez tolérer que les lignes soient justifiées à gauche, il suffit de placer les tuyaux avant les objects et de placer un masque sur le bord gauche, essentiellement comme ceci:

 li::before { content: " | "; white-space: nowrap; } ul, li { display: inline; } .mask { width:4px; position: absolute; top:8px; //position as needed } 

exemple plus complet: http://jsbin.com/hoyaduxi/1/edit

Une solution consiste à styliser la bordure gauche comme suit:

 li { display: inline; } li + li { border-left: 1px solid; margin-left:.5em; padding-left:.5em; } 

Cependant, cela ne vous donnera peut-être pas les résultats escomptés si l’ensemble des listes s’emballe, comme dans votre exemple. Cela donnerait quelque chose comme:

 foo | bar | baz | bob | bill | judy 

Je suis tombé sur une solution aujourd’hui qui ne semble pas être déjà là et qui semble très bien fonctionner jusqu’à présent. La réponse acceptée ne fonctionne pas telle quelle sur IE10 mais celle-ci le fait. http://codepen.io/vithun/pen/yDsjf/ crédit à l’auteur bien sûr!

 .pipe-separated-list-container { overflow-x: hidden; } .pipe-separated-list-container ul { list-style-type: none; position: relative; left: -1px; padding: 0; } .pipe-separated-list-container ul li { display: inline-block; line-height: 1; padding: 0 1em; margin-bottom: 1em; border-left: 1px solid; } 
 
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten
  • Eleven
  • Twelve
  • Thirteen
  • Fourteen
  • Fifteen
  • Sixteen
  • Seventeen
  • Eighteen
  • Nineteen
  • Twenty
  • Twenty One
  • Twenty Two
  • Twenty Three
  • Twenty Four
  • Twenty Five
  • Twenty Six
  • Twenty Seven
  • Twenty Eight
  • Twenty Nine
  • Thirty

Oui, vous devrez utiliser des pseudo-éléments ET des pseudo-sélecteurs: http://jsfiddle.net/cYky9/

Vous pouvez utiliser le CSS suivant pour résoudre.

 ul li { float: left; } ul li:before { content: "|"; padding: 0 .5em; } ul li:first-child:before { content: ""; padding: 0; } 

Devrait également fonctionner sur IE8 +.