Kemarin saya melihat postingan dari goos menggunakan ucweb: Siapa bilang menu Float tidak bisa dipusatkan secara horizontal ? Saya masuk dan melihatnya, dan menemukan bahwa metodenya agak rumit, menggunakan margin negatif, position:relativel; peretasan.
Saya punya cara yang lebih sederhana di sini, yang akan saya tunjukkan terlebih dahulu:
Sebenarnya saya seharusnya meletakkan div lain di luar, tetapi untuk mengurangi emisi karbon, saya membuangnya.
Jalankan kotak kode
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
body{font-family:Verdana,Arial,sans-serif;ukuran font:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;gaya daftar:tidak ada;}
#navigasi{display:inline-block;border:solid 1px merah;padding:20px;}
#navigasi li{height:30px;float:left;}
#navigasi li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
#navigasi di a:hover{background:#59c099;color:#fff;}
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]
Yang paling penting adalah kalimat ini:
Untuk menangani versi IE yang lebih rendah, komentar bersyarat digunakan di sini. Tampaknya di IE7 dan di bawahnya, fungsi display:inline;
Navigasi pintu geser berevolusi dari kode di atas:
Jalankan kotak kode
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
body{font-family:Verdana,Arial,sans-serif;ukuran font:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;gaya daftar:tidak ada;}
#navigasi{display:inline-block;padding:20px;border:solid 1px merah;}
#navigasi li{height:30px;float:left;}
#navigasi li a{float:left;background:#97C099 url( ) kanan -352px tanpa pengulangan;padding-kanan:27px;line-height:33px;cursor:hand;}
#navigasi li a:hover,#navigasi li.saat ini a{background-position:left -176px;color:#009;background-color:#8597B5;}
#navigasi li a:hover span,#navigasi li.saat ini rentang{background-position:right -528px;}
#navigasi li.saat ini a{font-weight:bold;}
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]
Diantaranya, dua kalimat ini perlu dijelaskan agar tidak dianggap mubazir:
#navigation li a{overflow:hidden;} /* Sembunyikan 3px yang dijatuhkan pada IE5.5 dan 6. Ini bukan bug 3px! Karena height:30px;line-height:33px; di IE5.5 dan 6, tingginya 33px. */
#navigation li a span{cursor:hand;}/* Atasi bug di IE 5.5, 6, dan 7 dimana mouse tidak menampilkan bentuk tangan saat diletakkan pada span. Selain itu, IE5.5 tidak mendukung kursor:penunjuk; tetapi semua versi IE mengenali kursor:tangan;*/
Selesai. Kekurangannya adalah menulis baris komentar bersyarat itu seperti pasir di mata bagi penderita xhtml mysophobia. Jika ingin menghilangkannya, tidak ada salahnya menggunakan hack! hehe!
Tidak ada masalah yang ditemukan di safari4, chrome, opera10, ie5.5, 5, 6, 7, ff3.