web-dev-qa-db-fra.com

Séparateurs verticaux sur le menu UL horizontal

J'essaie de créer une barre de navigation horizontale (pas de liste déroulante, mais une liste horizontale), mais je ne parviens pas à trouver le meilleur moyen d'ajouter des séparateurs verticaux entre les éléments de menu.

Le code HTML réel est le suivant:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>

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 diviseur vertical, sauf que je ne souhaite pas qu'un séparateur soit affiché avant le premier élément et que je ne souhaite pas qu'un séparateur soit affiché après le deuxième élément.

Le résultat final devrait ressembler à ceci:

Point 1 | Point 2 | Point 3 | Point 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 régler le list-style-image propriété, mais l'image ne s'est pas affichée. J'ai également essayé de définir le séparateur comme arrière-plan, ce qui a en fait plus ou moins fonctionné, sauf que le premier élément a un séparateur devant lui.

htmlcssmarkup
64
Michael L

Assez simple sans aucun "avoir à spécifier le premier élément". CSS est plus puissant que la plupart des gens le pensent (par exemple, le first-child:before is great!). Mais c’est de loin le moyen le plus propre et le plus approprié 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, utilisez simplement une simple liste non ordonnée en HTML et elle la peuplera pour vous. HTML devrait ressembler à ceci:

<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-- navigation -->

Le résultat sera juste comme ceci:

ACCUEIL À PROPOS DE NOUS | SOUTIEN

Vous pouvez maintenant étendre indéfiniment et ne jamais avoir à vous soucier de l'ordre, des liens modifiés ou de votre première entrée. Tout est automatisé et fonctionne très bien!

106
David Cahill

essayez celui-ci, chercheur:

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

cela n'affectera que les éléments li adjecent

trouvé ici

26
vladkras

Cela peut aussi ê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

12
Campbeln

Je pense que votre meilleur coup est un border-left propriété affectée à chacun des li sauf le premier (vous devez donner à la première classe une classe nommée first et supprimer explicitement la bordure correspondante).

Même si vous générez le <li> par programme, assigner une classe first devrait être facile.

3
Pekka 웃

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

2
newbie
.last { border-right: none

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

Cela fonctionne bien pour moi:

NB j'utilise BEM/OCSS Syntaxe 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;
        }

      }
  }
}
0
Satu