แถบการนำทางส่วนใหญ่จัดเรียงในแนวนอนดังที่แสดงในรูปด้านล่างดังนั้นสิ่งนี้จะเกิดขึ้นได้อย่างไร? ในความเป็นจริงส่วนใหญ่ใช้การจัดเรียงแนวนอนของ LI ในแท็ก <ul> นี่คือตัวอย่างที่จะอธิบายรายละเอียดว่ามีการใช้งานอย่างไร
1. เขียนเมนูแนวนอนสคีมารหัส HTML<ul id = เมนู> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href =/ www.vevb.com> jb51.net </a> </li> <li> <li> <a href = http: //www.google.com class = ล่าสุด> google.com </a> </li></ul>2 เขียนรหัส CSS
<1> ตั้งค่าสไตล์สามัญ
<style type = text/css> #menu {font: 12px verdana, Arial, sans-serif; /* ตั้งขนาดข้อความและสไตล์ตัวอักษร*/ ความกว้าง: 100%; } #MENU, #MENU LI {รายการสไตล์: ไม่มี; / * ลบสัญลักษณ์รายชื่อเริ่มต้น */ padding: 0; / * ลบระยะขอบภายในเริ่มต้น */ มาร์จิ้น: 0; / * ลบขอบด้านนอกเริ่มต้น */ ลอย: ซ้าย; /* ลอยไปทางซ้าย*/ จอแสดงผล: block;}<2> ตั้งค่าสไตล์ลิงค์
<style type = text/css> #menu li a {display: block; /* ตั้งค่าลิงก์เป็นองค์ประกอบระดับบล็อก*/ ความกว้าง: 150px; /* ตั้งค่าความกว้าง*/ ความสูง: 30px; /* ตั้งค่าความสูง*/ จุดสูง: 30px; /* ตั้งค่าความสูงของเส้นตั้งค่าเดียวกันสำหรับความสูงและความสูงของเส้นเพื่อให้ข้อความบรรทัดเดียวสามารถอยู่ตรงกลางในแนวตั้ง*/ การจัดตำแหน่งข้อความ: กลาง; /* ข้อความที่สอดคล้องกันตรงกลาง*/ พื้นหลัง:#3A4953; /* ตั้งค่าสีพื้นหลัง*/ สี: #FFF; /* ตั้งค่าสีข้อความ*/ การตกแต่งข้อความ: ไม่มี; /* ลบขีดล่าง*/ border-right: 1px solid #000; / * เพิ่มตัวแบ่งทางด้านซ้าย */} </style><3> เอฟเฟกต์ HOVER LINK
<style type = text/css> #menu li a: hover {พื้นหลัง: #146c9c; /* เปลี่ยนสีพื้นหลัง*/ สี: #FFFF; /* เปลี่ยนสีข้อความ*/} </style><4> ถอดกล่องขวาของแถบการนำทางซ้ายสุด
<style type = text/css> #menu li a.last {border-right: 0; /* ถอดเส้นขอบด้านซ้าย*/} </style>3 รหัสสมบูรณ์
<! doctype html> <html> <head> <meta charset = utf-8> <title> เอฟเฟกต์พรอมต์ภาพ </title> <script src = ../jQuery-3.3.1.min.js> </script> /* ตั้งขนาดข้อความและสไตล์ตัวอักษร*/ ความกว้าง: 100%; } #MENU, #MENU LI {รายการสไตล์: ไม่มี; / * ลบสัญลักษณ์รายชื่อเริ่มต้น */ padding: 0; / * ลบระยะขอบภายในเริ่มต้น */ มาร์จิ้น: 0; / * ลบขอบด้านนอกเริ่มต้น */ ลอย: ซ้าย; /* ลอยซ้าย*/ จอแสดงผล: บล็อก; } #menu li a {display: inline-block; /* ตั้งค่าลิงก์เป็นองค์ประกอบระดับบล็อก*/ ความกว้าง: 150px; /* ตั้งค่าความกว้าง*/ ความสูง: 30px; /* ตั้งค่าความสูง*/ จุดสูง: 30px; /* ตั้งค่าความสูงของเส้นตั้งค่าเดียวกันกับความสูงและความสูงของเส้นเพื่อให้ข้อความบรรทัดเดียวสามารถอยู่ตรงกลางในแนวตั้ง*/ การจัดตำแหน่งข้อความ: กลาง; /* ข้อความที่สอดคล้องกันตรงกลาง*/ พื้นหลัง:#3A4953; /* ตั้งค่าสีพื้นหลัง*/ สี: #FFF; /* ตั้งค่าสีข้อความ*/ การตกแต่งข้อความ: ไม่มี; /* ลบขีดเส้นใต้*/ ขอบขวา: 1px solid #000; / * เพิ่มตัวแบ่งทางด้านซ้าย */} #menu li a: โฮเวอร์ {พื้นหลัง: #146c9c; /* เปลี่ยนสีพื้นหลัง*/ สี: #FFF; /* เปลี่ยนสีข้อความ*/} #menu li a.last {ชายแดนขวา: 0; /* ลบเส้นขอบด้านซ้าย*/} </style> </head> <body> <ul id = เมนู> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </li> href = http: //www.yahoo.com> yahoo.com </a> </li> <li> <a href = http: //www.google.com class = ล่าสุด> google.com </a> </li></ul>ดำเนินการออนไลน์
เคล็ดลับ: คุณสามารถแก้ไขรหัสก่อนแล้วจึงเรียกใช้
ในระยะสั้นสิ่งที่จำเป็นที่สุดที่จะทำให้มันจัดเรียงในแนวนอนคือ: รูปแบบหลักของแท็ก <ui> คือการแสดงผล: balock;
รูปแบบหลักของ <li> คือการแสดงผล: Inline-Balock, Float: ซ้าย, สไตล์รายการ: ไม่มี;
นี่คือบทความเกี่ยวกับตัวอย่างการใช้งานของการจัดเรียงแนวนอน LI ในแท็กใน HTML สำหรับเนื้อหาการจัดเรียงแนวนอน HTML ที่เกี่ยวข้องเพิ่มเติมโปรดค้นหาบทความก่อนหน้าของ Wulin.com หรือบทความที่เกี่ยวข้องต่อไปนี้ ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!