เมื่อวานนี้ฉันเห็นโพสต์ที่โพสต์โดย Goos โดยใช้ UCWEB: ใครบอกว่าเมนู Float ไม่สามารถอยู่กึ่งกลางในแนวนอนได้? และแฮ็คเล็กน้อย
ฉันมีวิธีที่ง่ายขึ้นที่นี่ก่อนแสดง:
ที่จริงแล้วฉันควรมี 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
Body {Font-Family: Verdana, Arial, Sans-Serif; Font-Size: 12px; Margin: 120px auto; text-allign: center;}
ul {margin: 0; padding: 0; list-style: none;}
#Navigation {แสดง: Inline-block; Border: Solid 1px Red; Padding: 20px;}
#navigation li {ความสูง: 30px; ลอย: ซ้าย;}
#navigation li a {float: left; ความสูง: 30px; line-height: 30px; padding: 0 23px; พื้นหลัง:#97c099;}
#navigation li a: hover {พื้นหลัง:#59c099; สี: #ffff;}
</style>
<!-[ถ้า lte ie 7]> <style type = "text/css">#การนำทาง {display: inline;} </style> <! [endif]->
<title> วิธีการห้องเมนูลอย </title>
</head>
<body>
<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>
</body>
</html>
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อนจากนั้นกด Run]
สิ่งที่สำคัญที่สุดคือประโยคนี้:
<!-[ถ้า lte ie 7]> <style type = "text/css">#การนำทาง {display: inline;} </style> <! [endif]->
ในการดูแล IE รุ่นล่างมีการใช้คำอธิบายประกอบตามเงื่อนไขที่นี่
การนำทางประตูเลื่อนวิวัฒนาการมาจากรหัสด้านบน:
รันกล่องรหัส
<! 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
Body {Font-Family: Verdana, Arial, Sans-Serif; Font-Size: 12px; Margin: 120px auto; text-allign: center;}
ul {margin: 0; padding: 0; list-style: none;}
#Navigation {แสดง: inline-block; padding: 20px; border: solid 1px red;}
#navigation li {ความสูง: 30px; ลอย: ซ้าย;}
#navigation li a {float: ซ้าย; พื้นหลัง:#97c099 url (<a href = ") ด้านบนไม่ต้องทำซ้ำ;
#navigation li a span {ความสูง: 30px; float: ซ้าย; พื้นหลัง: url (<a href = ") ขวา -352px ไม่มีการทำซ้ำ; padding-right: 27px; line-height: 33px; เคอร์เซอร์: Hand;}
#navigation li a: hover,#การนำทาง li.current a {ตำแหน่งพื้นหลัง: ซ้าย -176px; สี:#009; พื้นหลังสี:#8597b5;}
#navigation li a: hover span,#การนำทาง li.current a span {ตำแหน่งพื้นหลัง: ขวา -528px;}
#navigation li.current a {font-weight: bold;}
</style>
<!-[ถ้า lte ie 7]> <style type = "text/css">#การนำทาง {display: inline;} </style> <! [endif]->
<title> อัปเดตเป็นสไตล์การเลื่อนประตูตามรหัสด้านบน </title>
</head>
<body>
<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 = "#"> <pan> กลุ่ม </span> </a> </li>
<li> <a href = "#"> <pan> ชุมชน </span> </a> </li>
<li> <a href = "#"> <span> help </span> </a> </li>
</ul>
</body>
</html>
[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อนจากนั้นกด Run]
ในหมู่พวกเขามีความจำเป็นที่จะต้องอธิบายสองประโยคนี้เพื่อไม่ให้พิจารณาซ้ำซ้อน:
#navigation li a {overflow: hidden;} /* ซ่อน 3px พิเศษที่ IE5.5 และ 6 ไม่ใช่ข้อผิดพลาด 3px! เนื่องจากความสูง: 30px; ความสูงของสาย: 33px; ใน IE5.5 และ 6 ความสูงคือ 33px -
#navigation li a span {เคอร์เซอร์: hand;}/* ดูแลข้อบกพร่องที่เมาส์ในช่วงไม่ดูเหมือนรูปร่างมือ นอกจากนี้ IE5.5 ไม่สนับสนุนเคอร์เซอร์: ตัวชี้;
หลังจากเสร็จสิ้นข้อเสียคือการเขียนความคิดเห็นแบบมีเงื่อนไขเหมือนทรายในดวงตาของคุณสำหรับผู้ที่มีการเจ็บป่วย XHTML ฮิฮิ
ไม่พบปัญหาใน Safari4, Chorme, Opera10, IE5.5, 5, 6, 7, FF3