ใช้โค้ด CSS เพื่อจัดตำแหน่งรายการหัวข้อย่อยใน HTML
นักออกแบบเว็บไซต์ใช้รายการหัวข้อย่อยเป็นมากกว่าการเพิ่มหัวข้อย่อยและข้อความ แท็ก HTML ที่ใช้สร้างรายการหัวข้อย่อยมีประโยชน์สำหรับการสร้างเมนูหรือจัดระเบียบรูปภาพเพื่อให้ JavaScript โหลดลงในสไลด์โชว์ การเรียนรู้การใช้โค้ดสไตล์ชีตแบบเรียงซ้อนร่วมกับรายการหัวข้อย่อย ซึ่งเรียกว่า "รายการที่ไม่เรียงลำดับ" ในภาษาสแลง HTML จะเปิดโอกาสการออกแบบเว็บที่น่าตื่นเต้นมากมาย
ขั้นตอนที่ 1
เปิดไฟล์ HTML ของคุณที่มีรายการหัวข้อย่อย แล้วดูระหว่างแท็ก และ ที่ด้านบนของโค้ด เพิ่มแท็กหากยังไม่มีอยู่ หากรหัสของคุณมี a แท็กที่ไหนสักแห่งหลังแท็กและนั่น มีการอ้างอิงถึงไฟล์ CSS จากนั้นเปิดไฟล์นั้นแทน โค้ด CSS ของคุณจะอยู่ระหว่างแท็กหรือบรรทัดใหม่ของไฟล์ CSS
วีดีโอประจำวันนี้
ขั้นตอนที่ 2
จัดข้อความภายในสัญลักษณ์แสดงหัวข้อย่อยทั้งหมดโดยการตั้งค่า "text-align" สำหรับ your
- แท็ก ดิ
- และ แท็กเพื่อกำหนดเป็นส่วนหนึ่งของรายการเดียว เมื่อคุณจัดแนวข้อความสำหรับ
- แท็กล้อมรอบ
- แท็ก การจัดตำแหน่งจะมีผลกับข้อความในทุกสัญลักษณ์แสดงหัวข้อย่อย แต่ไม่ได้จัดแนวรายการไปทางซ้ายหรือขวาของหน้า นี่คือตัวอย่างโค้ด CSS สำหรับตั้งค่า "text-align":
ul {จัดข้อความ: right;}
โปรดทราบว่าสัญลักษณ์แสดงหัวข้อย่อยไม่เคลื่อนที่ไปกับข้อความ กระสุนจะอยู่ทางซ้ายในกรณีนี้
ขั้นตอนที่ 3
จัดรายการทั้งหมดให้ชิดซ้ายหรือขวาของหน้าโดยตั้งค่า "float" สำหรับ your
- แท็ก เมื่อ "float" ถูกตั้งค่าเป็นซ้ายหรือขวาบน a
- แท็กจะย้ายรายการหัวข้อย่อยทั้งหมดไปทางซ้ายหรือขวาของหน้า ตั้งลอยแบบนี้:
ul {ลอย: ขวา;}
คุณสามารถตั้งค่า "ลอย" ไปทางซ้ายหรือทางขวาได้ แต่ไม่สามารถตั้งค่าตรงกลางได้
ขั้นตอนที่ 4
ห่อ .ของคุณ
- แท็กใน
และ
แท็กเพื่อสร้างเสื้อคลุมที่จะจัดรายการหัวข้อย่อยบนหน้าของคุณ รหัสผลลัพธ์ของคุณจะมีลักษณะดังนี้:- รายการสินค้า
- รายการสินค้า
ดิ
แท็กไม่ได้จัดสิ่งใดให้อยู่ตรงกลาง คุณต้องใช้ CSS เพื่อจัดศูนย์ทุกอย่าง เพิ่มรหัสต่อไปนี้ระหว่าง your
