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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<gaya tipe="teks/css">
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;}
</gaya>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>menu mengambang salah satu cara untuk menang</title>
</kepala>
<tubuh>
<ul id="navigasi">
<li><a href="#">Beranda</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Toko</a></li>
<li><a href="#">Grup</a></li>
<li><a href="#">Komunitas</a></li>
<li><a href="#">Bantuan</a></li>
</ul>
</tubuh>
</html>
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]
Yang paling penting adalah kalimat ini:
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<gaya tipe="teks/css">
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;}
</gaya>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>Tingkatkan ke gaya pintu geser sesuai dengan kode di atas</title>
</kepala>
<tubuh>
<ul id="navigasi">
<li><a href="#"><span>Beranda</span></a></li>
<li><a href="#"><span>Berita</span></a></li>
<li class="current"><a href="#"><span>Toko</span></a></li>
<li><a href="#"><span>Grup</span></a></li>
<li><a href="#"><span>Komunitas</span></a></li>
<li><a href="#"><span>Bantuan</span></a></li>
</ul>
</tubuh>
</html>
[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.