Bagaimanakah Saya Boleh Mengasingkan Item Navigasi Dengan Cekap Hanya Menggunakan CSS?

Mengekalkan Pemisahan Navigasi dengan CSS

Apabila menambah pemisah antara elemen navigasi, CSS boleh memberikan penyelesaian yang lebih cekap dan menarik secara visual daripada menambah senarai tambahan item atau menggabungkan pemisah dalam imej elemen.

Kedua-dua penyelesaian yang dicadangkan dalam soalan mempunyai potensi kelemahan. Menambah lebih banyak item senarai untuk pengasingan boleh mengacaukan struktur HTML, sementara memasukkan pemisah dalam imej boleh menimbulkan isu dengan klik yang tidak disengajakan.

Penyelesaian yang elegan ialah menggunakan CSS tulen untuk mencipta pemisah. Pendekatan ini membolehkan anda mengekalkan pemisahan visual yang diingini tanpa mengubah suai struktur HTML atau mengubah imej elemen.

Begini cara ia berfungsi:

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

Kod ini menambah bar menegak antara setiap senarai item. Penggunaan pemilih bersebelahan memastikan bahawa bar hanya ditambah antara item senarai, bukan sebelum yang pertama atau selepas yang terakhir. Pemilih pseudo :before memasukkan bar sebelum setiap elemen tanpa menjejaskan kandungan sedia ada.

Dengan menggunakan teknik CSS ini, anda boleh mencapai pemisahan yang diingini tanpa mengorbankan kebersihan struktur HTML anda atau menjejaskan pengalaman pengguna dengan tidak sengaja klik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengasingkan Item Navigasi Dengan Cekap Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!