Trennzeichen für die Navigation

Ich muss Trennzeichen zwischen Navigationselementen hinzufügen. Trennzeichen sind Bilder.

Meine HTML-Struktur ist wie folgt : ol > li > a > img.

Hier komme ich zu zwei möglichen Lösungen:

1. Um weitere liTags für die Trennung hinzuzufügen (boo!),
2. Fügen Sie ein Trennzeichen in das Bild jedes Elements ein (dies ist besser, aber es besteht die Möglichkeit, dass der Benutzer beispielsweise auf "Startseite" klickt, aber zu "Dienste" gelangt, da diese hintereinander liegen und der Benutzer möglicherweise versehentlich auf das Trennzeichen klickt gehört zu "Services");

Was ist zu tun?

Verwenden Sie einfach das Trennbild als Hintergrundbild auf der li.

Positionieren Sie das Bild links neben dem Listenelement li, nicht jedoch auf dem ersten, damit es nur zwischen Listenelementen angezeigt wird .

Beispielsweise:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Dieses CSS fügt das Bild jedem Listenelement hinzu, das auf ein anderes Listenelement folgt - mit anderen Worten, alle außer dem ersten.

NB. Beachten Sie, dass der benachbarte Selektor (li + li) in IE6 nicht funktioniert. Sie müssen daher nur das Hintergrundbild zum herkömmlichen li (mit einem bedingten Stylesheet) hinzufügen und möglicherweise einen negativen Rand auf eine der Kanten anwenden.

Wenn es nicht dringend erforderlich ist, Bilder für die Trennzeichen zu verwenden, können Sie dies mit reinem CSS tun.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

Dies setzt einen Balken zwischen die einzelnen Listenelemente, genau wie das Bild in der ursprünglich beschriebenen Frage. Da wir jedoch die benachbarten Selektoren verwenden , wird der Balken nicht vor dem ersten Element platziert. Und da wir den :beforePseudo-Selektor verwenden, wird am Ende kein Selektor gesetzt.

Sie können ein liElement hinzufügen , in dem Sie einen Teiler hinzufügen möchten

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

In CSS können Sie folgenden Code hinzufügen.

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

Dies erhöht die Ausführungsgeschwindigkeit, da kein Image geladen wird. teste es einfach aus .. :)

Die andere Lösung ist in Ordnung, aber es ist nicht erforderlich, das letzte Trennzeichen hinzuzufügen, wenn : after verwendet wird, oder ganz am Anfang, wenn Folgendes verwendet wird : before .

SO:

Fall: nach

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

Fall: vorher

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Um das Trennzeichen relativ zum Menütext vertikal zu zentrieren,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Fügen Sie das Trennzeichen zum liHintergrund hinzu und stellen Sie sicher, dass der Link nicht erweitert wird, um das Trennzeichen abzudecken. Dies bedeutet, dass das Trennzeichen nicht anklickbar ist.

Für diejenigen, die Sass verwenden , habe ich zu diesem Zweck ein Mixin geschrieben :

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

Beispiel:

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

Welches wird Ihnen dies geben:

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

Ich glaube, die beste Lösung dafür ist das, was ich benutze, und das ist eine natürliche CSS-Grenze:

border-right:1px solid;

Möglicherweise müssen Sie sich um die Polsterung kümmern wie:

padding-left: 5px;
padding-right: 5px;

Wenn Sie nicht möchten, dass das letzte Li diese trennende Grenze hat, geben Sie dem letzten Kind "keine" in "Grenze rechts" wie folgt:

li:last-child{
  border-right:none;
}

Viel Glück :)

Fügen Sie es als Hintergrund in das Listenelement ein:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

Als nächstes empfehle ich ein anderes Markup für die Barrierefreiheit:
Anstatt die Bilder inline einzubetten, fügen Sie Text als Text ein, umgeben Sie jedes mit einer Spanne, wenden Sie das Bild als Hintergrund an und verbergen Sie den Text mit Anzeige: keine - dies Bietet viel mehr Flexibilität beim Styling und ermöglicht die Verwendung von Kacheln mit einem 1 Pixel breiten Hintergrundbild, spart Bandbreite und kann es in ein CSS-Sprite einbetten, das HTTP-Aufrufe spart:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

UPDATE OK, ich sehe, dass andere eine ähnliche Antwort vor mir erhalten haben - und ich stelle fest, dass John auch ein Mittel enthält, um zu verhindern, dass das Trennzeichen vor dem ersten Element erscheint, indem der li + li-Selektor verwendet wird - was bedeutet, dass jedes li nach dem anderen kommt li.