Contoh bar navigasi berpusat secara automatik dan isu berkaitan DIV+CSS_CSS/HTML

Ini adalah bar navigasi yang baru saya buat untuk memusatkan empat PAUTAN, saya membuatnya seperti ini, tetapi selepas selesai, saya mendapati banyak masalah saya akan menulisnya dan berkongsi dengan semua orang.

Pertama sekali, mari lihat bar navigasi ini!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>uji zishu</title> <style> /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none;} a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;} #nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;} #nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;} #nav li a{margin:1px;} p{ margin:50px 0; text-align:center; } </style> <div id="nav"> <ul> <li><a href="http://www.kijiji.cn" target="_blank">Halaman utama</a></li> <li><a href="http://www.kijiji.cn/fabu" target="_blank">Terbitkan maklumat</a></li> <li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料" target="_blank">Koleksi Pelanggan Saya</a></li> <li><a href="http://blog.kijiji.com.cn/help/" target="_blank">Bantuan</a></li> </ul> </div> <p><a href="http://www.zishu.cn" target="_blank">www.zishu.cn Zishu</a> 2006-09-11 awal pagi</p>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ]

Soalan:
1. Pepijat ruang muncul dalam FIREFOX saya. Saya tidak tahu mengapa jika titik LI tidak ditulis pada baris yang sama, anda boleh mencubanya jalankan kod di atas!

2. Perbezaan kecil antara IE dan FIREFOX (lihat gambar di bawah jika anda tidak melihat perbezaan kecil ini, anda tidak akan menulis padding: 6px 15px 5px 15px; lakukannya. Sambungkan garis menegak di tengah ke garisan atas dan bawah! (Terdapat perbezaan yang lebih kecil antara IE6 dan IE7); Jika anda fikir begitu, hanya padamkannya dan cuba, lihat jika ia berkesan!

4 Halaman akan dibalut apabila dizum ke jam tertentu Gunakan lebar min dalam FIREFOX untuk menyelesaikan masalah, tetapi lebar min tidak dikenali dalam IE, jadi anda hanya boleh menggunakan: ekspresi((documentElement. .clientWidt..... Inilah penyelesaiannya! Saya tidak menambahkannya pada kod di atas Jika anda tidak mahu memutuskan baris, cuma tukar baris #nav di atas kepada:

Kod program.

Salin kod Kod adalah seperti berikut: #nav{height:24px; pepejal #D28A05; atas sempadan:1px pepejal #D28A05;imej latar belakang: url(nav_bg.jpg);warna latar belakang: #FF9900; penjajaran teks: tengah; lebar min: 400px; lebar: ekspresi((documentElement. clientWidth < 400) ? "400px" : "auto" );}

Pada asasnya, terdapat banyak masalah dalam bidang ini, supaya anda boleh melakukannya temui banyak masalah! apa-apa, saya akan sangat gembira jika anda menunjukkannya