Kemarin saya melihat posting yang diposting oleh Goos menggunakan UCWEB: siapa yang mengatakan bahwa menu float tidak dapat dipusatkan secara horizontal? Dan sedikit peretasan.
Saya memiliki cara yang lebih mudah di sini, pertama -tama tunjukkan:
Sebenarnya, saya harus memiliki div lain di luar, tetapi saya menyerah untuk mengurangi emisi karbon.
Jalankan kotak kode
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<type style = "text/css">
Body {font-family: Verdana, Arial, sans-serif; font-size: 12px; margin: 120px auto; text-align: center;}
ul {margin: 0; padding: 0; Daftar-gaya: Tidak Ada;}
#navigation {display: inline-block; border: solid 1px red; padding: 20px;}
#navigasi li {height: 30px; float: left;}
#navigasi li a {float: left; height: 30px; line-height: 30px; padding: 0 23px; latar belakang:#97c099;}
#Navigation Li A: Hover {latar belakang:#59c099; color: #ffff;}
</tyle>
<!-[jika LTE IE 7]> <style type = "text/css">#navigasi {display: inline;} </style> <! [endif]->
<Title> Ruang Menu Float dalam Satu Metode </iteme>
</head>
<body>
<ul id = "navigasi">
<li> <a href = "#"> rumah </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>
</body>
</html>
[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]
Yang paling penting adalah kalimat ini:
<!-[jika LTE IE 7]> <style type = "text/css">#navigasi {display: inline;} </style> <! [endif]->
Untuk menjaga versi yang lebih rendah dari IE, anotasi bersyarat digunakan di sini.
Navigasi pintu geser berevolusi dari kode di atas:
Jalankan kotak kode
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<type style = "text/css">
Body {font-family: Verdana, Arial, sans-serif; font-size: 12px; margin: 120px auto; text-align: center;}
ul {margin: 0; padding: 0; Daftar-gaya: Tidak Ada;}
#Navigation {display: inline-block; padding: 20px; border: solid 1px red;}
#navigasi li {height: 30px; float: left;}
#Navigation Li a {float: kiri; latar belakang:#97c099 url (<a href = ") kiri atas tanpa repeat; padding-left: 27px; tinggi: 30px; overflow: tersembunyi;}
#navigasi li a span {height: 30px; float: left; latar belakang: url (<a href = ") kanan -352px no-repeat; padding-kanan: 27px; line-height: 33px; kursor: tangan;}
#navigasi li A: Hover,#navigasi li.current a {latar belakang-posisi: kiri -176px; warna:#009; latar belakang-warna:#8597b5;}
#Navigasi Li A: Hover Span,#Navigasi Li.Current A Span {Latar Belakang: Kanan -528px;}
#Navigation li.Current a {font-weight: bold;}
</tyle>
<!-[jika LTE IE 7]> <style type = "text/css">#navigasi {display: inline;} </style> <! [endif]->
<Title> Pembaruan untuk Gaya Pintu Geser Menurut kode di atas </iteme>
</head>
<body>
<ul id = "navigasi">
<li> <a href = "#"> <span> home </span> </a> </li>
<li> <a href = "#"> <span> News </span> </a> </li>
<li class = "current"> <a href = "#"> <span> store </span> </a> </li>
<li> <a href = "#"> <span> grup </span> </a> </li>
<li> <a href = "#"> <span> Komunitas </span> </a> </li>
<li> <a href = "#"> <span> Help </span> </a> </li>
</ul>
</body>
</html>
[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]
Di antara mereka, perlu menjelaskan kedua kalimat ini agar tidak dianggap berlebihan:
#navigasi li a {overflow: tersembunyi;} /* sembunyikan 3px tambahan yang yaitu .5 dan 6, bukan bug 3px! Karena tinggi: 30px;-line-height: 33px; di IE5.5 dan 6, tinggi 33px. */
#navigasi li a span {cursor: hand;}/* jaga bug yang mouse pada rentang tidak terlihat seperti bentuk tangan. Selain itu, IE5.5 tidak mendukung kursor: pointer; tetapi IE semua versi tahu kursor: tangan;*/
Setelah selesai, kerugiannya adalah menuliskan komentar bersyarat seperti pasir di mata Anda bagi mereka yang memiliki morbiditas xhtml. Hehe!
Tidak ada masalah yang ditemukan di Safari4, Chorme, Opera10, IE5.5, 5, 6, 7, FF3.