เมื่อวานฉันเห็นโพสต์จาก goos โดยใช้ ucweb: ใครบอกว่าเมนู Float ไม่สามารถจัดกึ่งกลางแนวนอน ได้ ฉันเข้าไปดูแล้วพบว่าวิธีการนี้ค่อนข้างยุ่งยากโดยใช้ระยะขอบติดลบposition:relativel; แฮ็ก
ฉันมีวิธีที่ง่ายกว่านี้ ซึ่งฉันจะแสดงก่อน:
อันที่จริง ฉันควรจะวางอีก div ไว้ข้างนอก แต่เพื่อลดการปล่อยก๊าซคาร์บอน ฉันจึงทิ้งมันไป
เรียกใช้กล่องรหัส
<!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 ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
เนื้อความ {font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{ระยะขอบ:0;ช่องว่างภายใน:0;รายการสไตล์:ไม่มี;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#การนำทาง li{height:30px;float:left;}
#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;พื้นหลัง:#97C099;}
#การนำทาง li a:hover{พื้นหลัง:#59c099;color:#fff;}
</สไตล์>
<!--[ถ้า lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>เมนูลอยทางเดียวที่จะชนะ</title>
</หัว>
<ร่างกาย>
<ul id="การนำทาง">
<li><a href="#">บ้าน</a></li>
<li><a href="#">ข่าว</a></li>
<li><a href="#">ร้านค้า</a></li>
<li><a href="#">กลุ่ม</a></li>
<li><a href="#">ชุมชน</a></li>
<li><a href="#">ช่วยเหลือ</a></li>
</ul>
</ร่างกาย>
</html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
สิ่งที่สำคัญที่สุดคือประโยคนี้:
<!--[ถ้า lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
เพื่อดูแลเวอร์ชันที่ต่ำกว่าของ IE มีการใช้ความคิดเห็นแบบมีเงื่อนไขที่นี่ รู้สึกว่าใน IE7 และต่ำกว่า ฟังก์ชันของ display:inline;
การนำทางประตูบานเลื่อนพัฒนามาจากโค้ดด้านบน:
เรียกใช้กล่องรหัส
<!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 ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
เนื้อความ {font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{ระยะขอบ:0;ช่องว่างภายใน:0;รายการสไตล์:ไม่มี;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#การนำทาง li{height:30px;float:left;}
#navigation li a{float:left;พื้นหลัง:#97C099 url( ) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
#navigation li a:hover,#navigation li.current a{ตำแหน่งพื้นหลัง:ซ้าย -176px;สี:#009;สีพื้นหลัง:#8597B5;}
#navigation li a:hover span,#navigation li.current ช่วง {ตำแหน่งพื้นหลัง: ขวา -528px;}
#navigation li.current a{font-weight:bold;}
</สไตล์>
<!--[ถ้า lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>อัพเกรดเป็นแบบประตูบานเลื่อนตามโค้ดด้านบน</title>
</หัว>
<ร่างกาย>
<ul id="การนำทาง">
<li><a href="#"><span>บ้าน</span></a></li>
<li><a href="#"><span>ข่าวสาร</span></a></li>
<li class="current"><a href="#"><span>ร้านค้า</span></a></li>
<li><a href="#"><span>กลุ่ม</span></a></li>
<li><a href="#"><span>ชุมชน</span></a></li>
<li><a href="#"><span>ความช่วยเหลือ</span></a></li>
</ul>
</ร่างกาย>
</html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
ในบรรดาประโยคทั้งสองนี้จำเป็นต้องอธิบายเพื่อหลีกเลี่ยงไม่ให้ถูกพิจารณาว่าซ้ำซ้อน:
#navigation li a{overflow:hidden;} /* ซ่อน 3px ที่ตกโดย IE5.5 และ 6 มันไม่ใช่จุดบกพร่องของ 3px! เนื่องจาก height:30px;line-height:33px; ใน IE5.5 และ 6 ความสูงคือ 33px -
#navigation li a span{cursor:hand;}/* ดูแลจุดบกพร่องใน IE 5.5, 6 และ 7 โดยที่เมาส์ไม่แสดงรูปมือเมื่อวางไว้บน span นอกจากนี้ IE5.5 ไม่รองรับ cursor:pointer; แต่ IE ทุกเวอร์ชันรู้จัก cursor:hand;*/
จบแล้ว ข้อเสียคือการเขียนความคิดเห็นแบบมีเงื่อนไขนั้นก็เหมือนกับทรายเข้าตาสำหรับคนที่เป็นโรค xhtml mysophobia หากคุณต้องการกำจัดมัน การใช้แฮ็คก็ไม่เสียหายอะไร! อิอิ!
ไม่พบปัญหาใน safari4, chrome, opera10, ie5.5, 5, 6, 7, ff3