Pemisah untuk Navigasi

Saya perlu menambahkan pemisah antara elemen navigasi. Pemisah adalah gambar.

Struktur HTML saya seperti: ol > li > a > img.

Di sini saya sampai pada dua kemungkinan solusi:

1. Untuk menambahkan lebih banyak litag untuk pemisahan (boo!),
2. Sertakan pemisah dalam gambar setiap elemen (ini lebih baik, tetapi memungkinkan pengguna dapat mengeklik, misalnya, "Rumah", tetapi masuk ke "Layanan", karena mereka berada satu di belakang yang lain dan pengguna dapat secara tidak sengaja mengklik pemisah yang milik "Layanan");

Apa yang harus dilakukan?

Cukup gunakan gambar pemisah sebagai gambar latar belakang di li.

Untuk membuatnya hanya muncul di antara item daftar, posisikan gambar di sebelah kiri li, tetapi bukan di yang pertama.

Sebagai contoh:

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

CSS ini menambahkan gambar ke setiap item daftar yang mengikuti item daftar lainnya - dengan kata lain semuanya kecuali yang pertama.

NB. Sadarilah pemilih yang berdekatan (li + li) tidak berfungsi di IE6, jadi Anda hanya perlu menambahkan gambar latar belakang ke li konvensional (dengan stylesheet bersyarat) dan mungkin menerapkan margin negatif ke salah satu tepinya.

Jika tidak ada kebutuhan mendesak untuk menggunakan gambar untuk pemisah, Anda dapat melakukan ini dengan CSS murni.

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

Ini menempatkan sebuah bar di antara setiap item daftar, seperti yang dijelaskan gambar dalam pertanyaan asli. Tapi karena kita menggunakan selektor yang berdekatan , itu tidak meletakkan bilah sebelum elemen pertama. Dan karena kita menggunakan :beforepemilih semu, itu tidak menempatkannya di akhir.

Anda dapat menambahkan satu lielemen di mana Anda ingin menambahkan pembatas

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

Di CSS Anda dapat menambahkan kode berikut.

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

Ini akan meningkatkan kecepatan eksekusi Anda karena tidak akan memuat gambar apa pun. coba saja .. :)

Solusi lain tidak masalah, tetapi tidak perlu menambahkan pemisah di akhir jika menggunakan : setelah atau di awal jika menggunakan : sebelumnya .

BEGITU:

kasus: setelah

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

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

case: before

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

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

Untuk mendapatkan pemisah secara vertikal di tengah relatif terhadap teks menu,

.menustyle li + li:before

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

Tambahkan pemisah ke lilatar belakang dan pastikan tautan tidak meluas untuk menutupi pemisah, yang berarti pemisah tidak dapat diklik.

Bagi mereka yang menggunakan Sass , saya telah menulis mixin untuk tujuan ini:

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

Contoh:

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

Yang akan memberi Anda ini:

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

Saya percaya solusi terbaik untuk ini, adalah apa yang saya gunakan, dan itu adalah batas css alami:

border-right:1px solid;

Anda mungkin perlu merawat bantalan seperti:

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

Terakhir, jika Anda tidak ingin li terakhir memiliki batas pemisah, berikan "none" last-child di "border-right" seperti ini:

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

Semoga berhasil :)

Letakkan sebagai latar belakang pada elemen daftar:

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

Selanjutnya, saya merekomendasikan markup yang berbeda untuk aksesibilitas:
Daripada menyematkan gambar sebaris, letakkan teks sebagai teks, lingkari masing-masing dengan rentang, terapkan gambar sebagai latar belakang, dan kemudian sembunyikan teks dengan display: none - this memberikan lebih banyak fleksibilitas gaya, dan memungkinkan Anda menggunakan ubin dengan gambar bg selebar 1px, menghemat bandwidth, dan Anda dapat menyematkannya dalam sprite CSS, yang menghemat panggilan 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;}

UPDATE Oke, saya melihat orang lain mendapat jawaban serupa sebelum saya - dan saya perhatikan bahwa John juga menyertakan cara untuk menjaga pemisah agar tidak muncul sebelum elemen pertama, dengan menggunakan pemilih li + li - yang berarti setiap li datang setelah yang lain li.