Diviseurs verticaux sur le menu horizontal UL

J’essaie de créer une barre de navigation horizontale (pas de liste déroulante, juste une liste horizontale), mais j’ai du mal à trouver le meilleur moyen d’append des séparateurs verticaux entre les éléments de menu.

Le code HTML actuel est le suivant:

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

Le CSS actuel est le suivant:

 .menu li { display: inline; margin-left: 25px; padding-left: 25px; } 

Entre chaque élément de menu, je veux une petite image en tant que séparateur vertical, sauf que je ne veux pas voir de séparateur avant le premier élément et que je ne souhaite pas de séparateur après le deuxième élément.

Le résultat final devrait ressembler à ceci:

Point 1 | Item 2 | Point 3 | Item 4 | Point 5

Il suffit de remplacer le tuyau par une image réelle.

J’ai essayé différentes manières – j’ai essayé de définir la propriété list-style-image , mais l’image ne s’est pas affichée. J’ai également essayé de définir le séparateur comme un arrière-plan plus ou moins travaillé, sauf que le premier élément comportait un séparateur.

    Assez et simple sans “avoir à spécifier le premier élément”. Le CSS est plus puissant qu’on ne le pense (par exemple, le first-child:before c’est génial!). Mais c’est de loin la manière la plus propre et la plus appropriée de le faire, du moins à mon avis.

     #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li:not(:first-child):before { content: " | "; } 

    Maintenant, il vous suffit d’utiliser une simple liste non ordonnée en HTML pour la remplir. HTML devrait ressembler à ceci:

      

    Le résultat sera comme ceci:

    ACCUEIL | À PROPOS DE NOUS | SOUTIEN

    Maintenant, vous pouvez étendre indéfiniment et ne jamais avoir à vous soucier de l’ordre, du changement de lien ou de votre première entrée. Tout est automatisé et fonctionne très bien!

    essayez celui-ci, chercheur:

     li+li { border-left: 1px solid #000000 } 

    cela n’affectera que les éléments li

    trouvé ici

    Cela peut également être fait via CSS: pseudo-classes. Le support n’est pas aussi large et la réponse ci-dessus vous donne le même résultat, mais c’est du pur CSS-y =)

     .ULHMenu li { border-left: solid 2px black; } .ULHMenu li:first-child { border: 0px; } 

    OU:

     .ULHMenu li { border-right: solid 2px black; } .ULHMenu li:last-child { border: 0px; } 

    Voir: http://www.quirksmode.org/css/firstchild.html
    Ou: http://www.w3schools.com/cssref/sel_firstchild.asp

    Je pense que votre meilleur cliché est une propriété border-left qui est assignée à chacun des li s sauf le premier (vous devez donner au premier une classe nommée en first et supprimer explicitement la bordure).

    Même si vous générez le

  • programme, l’assignation d’une first classe devrait être facile.

    Une solution plus simple consisterait à append #navigation ul li~li { border-left: 1px solid #857D7A; } #navigation ul li~li { border-left: 1px solid #857D7A; }

     .last { border-right: none .last { border-right: none !important; } 

    Cela fonctionne très bien pour moi:

    NB J’utilise la syntaxe BSS / OCSS SCSS

     #navigation{ li{ &:after{ content: '|'; // use content for box-sizing text-indent: -999999px; // Hide the content display: block; float: right; // Position width: 1px; height: 100%; // The 100% of parent (li) background: black; // The color margin: { left: 5px; right: 5px; } } &:last-child{ &:after{ content: none; } } } } 

    Je le fais comme dit Pekka. Mettez un style en ligne sur chaque

  • :

     style="border-right: solid 1px #555; border-left: solid 1px #111;" 

    Décoller d’abord et en dernier lieu selon le cas.