web-dev-qa-db-fra.com

Séparateurs de texte pour les éléments LI

J'aimerais ajouter une barre oblique ('/') entre mes éléments li, mais je ne suis pas sûr de la meilleure façon de le faire sémantiquement. Pour le moment, j'inclus simplement la barre oblique dans la balise li et j'ajoute un espacement avec des espaces insécables, comme ceci:

<ul id="footer_menu">
    <li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

Qu'est-ce que tu penses? Merci.

csshtml-lists
31
Frank

Vous pouvez utiliser des pseudo-éléments pour inclure du texte après un élément et des sélecteurs CSS3 pour supprimer la barre oblique finale du dernier élément.

#footer_menu li:after {
    content: "/";
}
#footer_menu li:last-child:after {
    content: "";
}

MODIFIER:

Le tout peut être fait en une seule ligne avec une meilleure CSS3.

#footer_menu li:nth-child(n+2):before {
    content: "/";
}

EDIT: EDIT:

C'est encore plus facile que ça.

#footer_menu li + li:before {
    content: "/";
}
79
Kyle Sletten

Ceci est ma solution pour l'élément LI séparé par | (pipe):

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

Le combinateur d'adjacence (un signe plus, +) est très utile dans ce cas. Il vous permet de styliser un élément s'il a été directement précédé par un autre élément spécifié. Puisque le premier li n'est pas précédé par un autre li, le contenu ne lui sera pas ajouté. C'est beaucoup moins typé que:

li:before {
  content: " | ";
}

li:first-child:before {
  content: "";
}
24
klassmann

Pour ceux qui utilisent Sass , j’ai écrit un mixin à cet effet:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

Exemple:

@include addSeparator('li', '|', 1em);

Ce qui vous donnera ceci:

li+li:before {
  content: "|";
  padding: 0 1em;
}
1
d4nyll

Vous pouvez mettre le contenu de li dans une période et ensuite utiliser CSS:

ul#footer_menu li span:after { content:"/"; padding:0 5px; }

Ou quelque chose de similaire.

edit .__ Ah, comme dit Kyle, mais l’ajout de la règle last_child est plus complet.

1
Ian Devlin

Si vous essayez de faire quelque chose comme Support client/Informations de livraison/Tableau des tailles/Politique de confidentialité/ContactVous pouvez simplement le faire avec du code CSS.

Vous devrez ajouter la "première" classe à la première li de votre jeu, comme suit:

<ul id="footer_menu">
    <li class="first">Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

Et puis le CSS suivant

 #footer_menu ul {  
    float: left; 
    padding: 10px;
    list-style: none outside none;
}

#footer_menu li {
    border-left: 2px solid #000000;
    float: left;
    padding: 0 10px;
}

#footer_menu li.first {
    border: none;
}

Cela mettra tous les éléments li les uns à côté des autres et vous donnera une bordure. Le résultat ressemblera à quelque chose comme

Support client | Informations d'expédition | Tableaux de tailles | Politique de confidentialité | Contact 

0
tomoguisuru