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ń:
- Aby dodać więcej
li
tagów do separacji (boo!), - 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ć?
css
navigation
usability
separator
daGrevis
źródło
źródło
Odpowiedzi:
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:
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.
źródło
:before
pseudo selektora zapobiega jego pojawieniu się po ostatnim elemencie.border-left
do rysowania pionowej linii między elementami.Jeśli nie ma pilnej potrzeby używania obrazów jako separatorów, możesz to zrobić za pomocą czystego CSS.
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
:before
pseudo selektora, nie umieszcza go on na końcu.źródło
Możesz dodać jeden
li
element, w którym chcesz dodać separatorW CSS możesz dodać następujący kod.
Zwiększy to szybkość wykonywania, ponieważ nie załaduje żadnego obrazu. po prostu to przetestuj .. :)
źródło
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
sprawa: przed
źródło
Aby separator był wyśrodkowany w pionie względem tekstu menu,
źródło
Dodaj separator do
li
tła i upewnij się, że link nie rozszerza się, aby zakryć separator, co oznacza, że separatora nie będzie można kliknąć.źródło
Dla tych, którzy używają Sass , napisałem mixin w tym celu:
Przykład:
Co da ci to:
źródło
Uważam, że najlepszym rozwiązaniem jest to, czego używam, a jest to naturalna granica CSS:
Być może będziesz musiał zadbać o wypełnienie, takie jak:
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:
Powodzenia :)
źródło
Umieść go jako tło elementu listy:
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:
CSS:
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.
źródło