Separatori per la navigazione

Devo aggiungere separatori tra gli elementi di navigazione. I separatori sono immagini.

La mia struttura HTML è come: ol > li > a > img.

Qui vengo a due possibili soluzioni:

1. Per aggiungere più litag per la separazione (boo!),
2. Includi separatore nell'immagine di ogni elemento (questo è meglio, ma dà la possibilità che l'utente possa fare clic, ad esempio, su "Home", ma accedere a "Servizi", perché sono uno dietro l'altro e l'utente può accidentalmente fare clic sul separatore che appartiene a "Servizi");

Cosa fare?

Usa semplicemente l'immagine del separatore come immagine di sfondo sul file li.

Per fare in modo che appaia solo tra gli elementi dell'elenco, posiziona l'immagine a sinistra di li, ma non sul primo.

Per esempio:

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

Questo CSS aggiunge l'immagine a ogni elemento dell'elenco che segue un altro elemento dell'elenco, in altre parole tutti tranne il primo.

NB. Tieni presente che il selettore adiacente (li + li) non funziona in IE6, quindi dovrai semplicemente aggiungere l'immagine di sfondo al li convenzionale (con un foglio di stile condizionale) e forse applicare un margine negativo a uno dei bordi.

Se non è necessario utilizzare immagini per i separatori, puoi farlo con CSS puro.

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

Questo inserisce una barra tra ogni elemento dell'elenco, proprio come l'immagine nella domanda originale descritta. Ma poiché stiamo usando i selettori adiacenti , non mette la barra prima del primo elemento. E poiché stiamo usando lo :beforepseudo selettore, non ne mette uno alla fine.

Puoi aggiungere un lielemento in cui desideri aggiungere un divisore

<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 puoi aggiungere il seguente codice.

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

Ciò aumenterà la velocità di esecuzione poiché non caricherà alcuna immagine. provalo e basta .. :)

L'altra soluzione va bene, ma non è necessario aggiungere il separatore all'ultimo se si usa : dopo o all'inizio se si usa : prima .

COSÌ:

caso: dopo

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

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

caso: prima

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

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

Per ottenere il separatore centrato verticalmente rispetto al testo del menu,

.menustyle li + li:before

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

Aggiungi il separatore allo lisfondo e assicurati che il collegamento non si espanda per coprire il separatore, il che significa che il separatore non sarà selezionabile.

Per coloro che usano Sass , ho scritto un mixin a questo scopo:

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

Esempio:

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

Che ti darà questo:

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

Credo che la soluzione migliore per questo sia ciò che uso, e questo è un confine CSS naturale:

border-right:1px solid;

Potrebbe essere necessario occuparsi di imbottitura come:

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

Infine, se non vuoi che l'ultimo li abbia quel bordo di separazione, dai al suo ultimo figlio "nessuno" in "bordo destro" in questo modo:

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

In bocca al lupo :)

Mettilo come sfondo sull'elemento della lista:

<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 */

Successivamente, consiglio un markup diverso per l'accessibilità:
invece di incorporare le immagini in linea, inserisci il testo come testo, racchiudi ciascuna di esse con un intervallo, applica l'immagine come sfondo e quindi nascondi il testo con display: nessuno - questo offre molta più flessibilità di stile e ti consente di utilizzare il tiling con un'immagine bg larga 1px, risparmia larghezza di banda e puoi incorporarlo in uno sprite CSS, che salva le chiamate HTTP:

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;}

AGGIORNAMENTO OK, vedo che altri hanno ricevuto una risposta simile prima di me - e noto che John include anche un mezzo per impedire che il separatore appaia prima del primo elemento, utilizzando il selettore li + li - che significa qualsiasi li che viene dopo l'altro li.