Separatory do nawigacji

Muszę dodać separatory między elementami nawigacji. Separatory to obrazy.

Moja struktura HTML jest następująco: ol > li > a > img.

Tutaj dochodzę do dwóch możliwych rozwiązań:

1. Aby dodać więcej litagów do separacji (boo!),
2. Uwzględnij separator w obrazie każdego elementu (jest to lepsze, ale daje możliwość, że użytkownik może kliknąć, na przykład „Strona główna”, ale przejść do „Usług”, ponieważ znajdują się jeden za drugim i użytkownik może przypadkowo kliknąć separator, który należy do „Usługi”);

Co robić?

Po prostu użyj obrazu separatora jako obrazu tła w pliku li.

Aby pojawił się tylko między elementami listy, umieść obraz po lewej stronie li, ale nie na pierwszym.

Na przykład:

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

Ten arkusz CSS dodaje obraz do każdego elementu listy, który następuje po innym elemencie listy - innymi słowy do wszystkich z wyjątkiem pierwszego.

NB. Pamiętaj, że sąsiedni selektor (li + li) nie działa w IE6, więc będziesz musiał po prostu dodać obraz tła do konwencjonalnego li (z warunkowym arkuszem stylów) i być może zastosować ujemny margines na jednej z krawędzi.

Jeśli nie ma pilnej potrzeby używania obrazów jako separatorów, możesz to zrobić za pomocą czystego CSS.

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

Spowoduje to umieszczenie paska między każdą pozycją na liście, tak jak na obrazku w opisanym pierwotnym pytaniu. Ale ponieważ używamy sąsiednich selektorów , nie umieszcza paska przed pierwszym elementem. A ponieważ używamy :beforepseudo selektora, nie umieszcza go on na końcu.

Możesz dodać jeden lielement, w którym chcesz dodać separator

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

W CSS możesz dodać następujący kod.

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

Zwiększy to szybkość wykonywania, ponieważ nie załaduje żadnego obrazu. po prostu to przetestuj .. :)

Inne rozwiązanie jest w porządku, ale nie ma potrzeby dodawania separatora na końcu, jeśli używasz : po lub na samym początku, jeśli używasz : przed .

WIĘC:

sprawa: po

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

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

sprawa: przed

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

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

Aby separator był wyśrodkowany w pionie względem tekstu menu,

.menustyle li + li:before

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

Dodaj separator do litła i upewnij się, że link nie rozszerza się, aby zakryć separator, co oznacza, że ​​separatora nie będzie można kliknąć.

Dla tych, którzy używają Sass , napisałem mixin w tym celu:

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

Przykład:

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

Co da ci to:

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

Uważam, że najlepszym rozwiązaniem jest to, czego używam, a jest to naturalna granica CSS:

border-right:1px solid;

Być może będziesz musiał zadbać o wypełnienie, takie jak:

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

Na koniec, jeśli nie chcesz, aby ostatnia li miała tę oddzielającą ramkę, podaj ostatniemu dziecku „none” w „border-right” w ten sposób:

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

Powodzenia :)

Umieść go jako tło elementu listy:

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

Następnie zalecam inny znacznik dla dostępności:
zamiast osadzać obrazy w tekście, umieść tekst jako tekst, otocz każdy z nich rozpiętością, zastosuj obraz jako tło, a następnie ukryj tekst za pomocą wyświetlania: brak - to daje znacznie większą elastyczność stylizacji i pozwala na użycie kafelkowania z obrazem o szerokości 1 piksela, oszczędza przepustowość i można go osadzić w sprite'u CSS, który zapisuje wywołania 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;}

AKTUALIZACJA OK, widzę, że inni dostali podobną odpowiedź przede mną - i zauważam, że John zawiera również sposób na powstrzymanie separatora przed pojawieniem się przed pierwszym elementem, używając selektora li + li - co oznacza, że ​​każde li pojawia się po drugim li.