สวัสดี ฉันไม่ได้เขียนโพสต์เกี่ยวกับงาน html/css มาเป็นเวลานานแล้ว เมื่อเร็ว ๆ นี้ฉันเพิ่งเริ่มรวบรวมเค้าโครงใหม่และในกระบวนการนี้ฉันพบเคล็ดลับที่น่าสนใจที่ช่วยให้คุณทำให้เมนูมีความยืดหยุ่น (คุณสามารถเพิ่มรายการใหม่ลงไปได้และขนาดจะไม่เพิ่มขึ้น แต่จะเท่ากับ 100% ของขนาดเสมอ บล็อกหลัก) ดังนั้นวันนี้เราจะใช้เมนูยางโดยใช้ CSS
หากคุณขี้เกียจอ่านบทความนี้ คุณสามารถชมวิดีโอนี้ได้ ผู้เขียนยังอธิบายทุกอย่างได้ดีมาก:
เมนูยางพร้อม CSS - ขั้นตอนที่ 1
ขั้นตอนแรกคือมาร์กอัป html เสมอ เราจะอยู่ที่ไหนถ้าไม่มีมัน แต่ในกรณีของเราทุกอย่างจะง่าย:
- กระดาษห่อบล็อกสำหรับเมนู
- เมนูนั้นแสดงผ่านรายการสัญลักษณ์แสดงหัวข้อย่อย (แท็ก ul)
- มีรายการเมนูอยู่ข้างในและในนั้นก็มีลิงก์อยู่แล้ว
ทุกอย่างชัดเจน นี่คือรหัสมาร์กอัปของฉัน:
ทุกอย่างดูเป็นมาตรฐาน เช่นนี้:
ตอนนี้เราจะใส่ทุกอย่างในรูปแบบที่ต้องการ CSS จะเริ่มทำงาน
ขั้นตอนที่ 2 - สไตล์พื้นฐาน
ต่อไป ฉันจะเพิ่มสไตล์ให้กับ wrapper block กล่าวคือ ฉันจะตั้งค่าความกว้างสูงสุดเป็น 600 พิกเซล (เพื่อให้จับภาพหน้าจอได้ง่ายขึ้นเพื่อให้เมนูพอดี) และฉันจะจัดกึ่งกลางบล็อกด้วย
ห่อ(
พื้นหลัง: #fff;
ความกว้างสูงสุด: 600px;
ระยะขอบ: 0 อัตโนมัติ;
}
ขั้นตอนที่ 3 - ใช้ยาง
ตอนนี้เรามาดูเมนูกันดีกว่า ฉันจะลบเครื่องหมายออกจากมัน (แท็ก ul) ทำการไล่ระดับสีเชิงเส้นพื้นหลัง และที่สำคัญที่สุดคือใช้คุณสมบัติ display: table-row เพื่อทำให้คอนเทนเนอร์สำหรับเมนูทำงานเหมือนแถวของตาราง นี่เป็นสิ่งสำคัญที่ต้องทำเพื่อการจัดการเพิ่มเติม
R-เมนู(
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, #b0d4e3 0%,#88bacf 100%);
จอแสดงผล: ตาราง-แถว;
รายการสไตล์: ไม่มี;
}
อย่างที่คุณเห็น โค้ดด้านบนเพิ่งแก้ไขทุกสิ่งที่ฉันเขียนไป อย่างไรก็ตาม การสร้างการไล่ระดับสีโดยใช้เครื่องมือสร้าง Ultimate CSS Gradient นั้นสะดวก ฉันจะเขียนเกี่ยวกับเขาอีกครั้งสักวันหนึ่ง
R-เมนู(
จัดแนวตั้ง: ด้านล่าง;
จอแสดงผล: ตารางเซลล์;
ความกว้าง: อัตโนมัติ;
การจัดแนวข้อความ: กึ่งกลาง;
ความสูง: 50px;
เส้นขอบขวา: 1px ทึบ #222;
}
- การจัดแนวแนวตั้ง: ด้านล่าง - คุณสมบัตินี้จำเป็นเพื่อว่าหากข้อความในรายการเมนูยาว 2 บรรทัด ข้อความนั้นก็จะแสดงเท่าๆ กัน เมื่อเราสร้างเมนู คุณสามารถลบคุณสมบัตินี้ ขยายเพื่อให้รายการถูกบีบอัดและข้อความถูกย้ายไปยังสองบรรทัด แล้วคุณจะเห็นปัญหาในการแสดงผล คืนทรัพย์สินแล้วทุกอย่างจะเรียบร้อย
- display: table-cell - เนื่องจากเราตั้งค่าเมนูการแสดงผลให้เป็นแถวของตาราง จึงสมเหตุสมผลที่จะตั้งค่ารายการให้แสดงเป็นเซลล์ในตาราง นี่เป็นสิ่งจำเป็น
- width: auto — ความกว้างจะถูกคำนวณโดยอัตโนมัติ ขึ้นอยู่กับความยาวของข้อความในย่อหน้า
- text-align: center - นี่เป็นเพียงการจัดข้อความให้อยู่ตรงกลาง
- ความสูง: 50px — ตั้งค่าความสูงเป็น 50 พิกเซล
- border-right เป็นเพียงเส้นขอบทางด้านขวา ซึ่งเป็นตัวคั่นสำหรับรายการต่างๆ
ถึงตอนนี้เมนูดูไม่น่าดู แต่ก็ไม่เป็นไร ถึงเวลาที่ต้องคำนึงถึงแล้ว 
สิ่งสุดท้ายที่ต้องทำคือจัดรูปแบบลิงก์ภายในรายการ ที่นี่ฉันมีรหัสนี้:
R-เมนู li a(
การตกแต่งข้อความ: ไม่มี;
ความกว้าง: 1,000px;
ความสูง: 50px;
แนวตั้ง-จัด: กลาง;
จอแสดงผล: ตารางเซลล์;
สี: #fff;
แบบอักษร: ปกติ 14px Verdana;
}
และนี่คือลักษณะของเมนูตอนนี้:
ให้ฉันอธิบายบางบรรทัดอีกครั้ง:
- คุณสมบัติการตกแต่งข้อความจะแทนที่การขีดเส้นใต้เริ่มต้นสำหรับลิงก์
- width: 1,000px อาจเป็นบรรทัดที่สำคัญที่สุด คุณต้องตั้งค่าลิงก์ให้มีความกว้างประมาณนี้ อาจจะน้อยกว่านี้ แต่ต้องใหญ่กว่ารายการเมนูที่กว้างที่สุดเท่าที่จะเป็นไปได้อย่างแน่นอน ลิงก์จะไม่กว้าง 1,000 พิกเซล เนื่องจากความกว้างจะถูกจำกัดโดยรายการเมนู li ซึ่งตั้งค่าความกว้างเป็นอัตโนมัติ แต่จะทำให้มั่นใจได้ว่าสำหรับรายการจำนวนเท่าใดก็ได้ในเมนูจะเป็น 100 เสมอ เปอร์เซ็นต์ของความกว้าง
- แนวตั้ง: ตรงกลาง และจอแสดงผล: ตารางเซลล์ - อันแรกจะจัดข้อความในแนวตั้งตรงกลาง และอันที่สองจะแสดงลิงก์เป็นเซลล์ด้วย จำเป็นต้องมีคุณสมบัติทั้งสองอย่าง
- แบบอักษร - นี่เป็นเพียงชุดการตั้งค่าสำหรับแบบอักษร อ่านเกี่ยวกับคุณสมบัติ CSS สำหรับแบบอักษรในบทความนี้
ขั้นตอนที่ 4 (ไม่บังคับ) คุณสามารถเพิ่มการโต้ตอบได้
ตัวอย่างเช่น เพื่อให้สีของรายการเมนูเปลี่ยนแปลงเมื่อโฮเวอร์ สิ่งนี้สามารถนำไปใช้งานได้ค่อนข้างง่ายโดยใช้คลาสหลอกแบบโฮเวอร์:
R-เมนู li:โฮเวอร์(
สีพื้นหลัง: #6bba70;
}
ทดสอบความเหนียวของเมนู
เยี่ยมมาก เมนูพร้อมแล้ว แต่เรายังไม่ได้ตรวจสอบสิ่งที่สำคัญที่สุด - มันเหนียวแค่ไหนตามที่ฉันสัญญาไว้กับคุณ ฉันจะเพิ่มอีก 2 รายการในเมนู:
เมนูยังคงมีความกว้าง 600 พิกเซล สิ่งของที่เหลือถูกย่อให้เล็กลงเล็กน้อยเพื่อรองรับสิ่งของใหม่ 2 ชิ้น
ฉันจะเพิ่มประเด็นยาวอีกหนึ่งประเด็น:
อย่างที่คุณเห็น เมนูหดตัวลงอีกเล็กน้อยและรายการยาวก็แสดงได้ค่อนข้างปกติ และถ้าไม่ใช่เพราะคุณสมบัติแนวตั้ง: ด้านล่างที่ฉันบอกคุณ เมนูจะดูแย่ลง
ฉันจะลดเมนูเหลือสามรายการ
รายการมีอิสระมากขึ้นมาก แต่เมนูเองก็ไม่ได้เปลี่ยนความกว้าง เราเลยทำเมนูยาง 100% ขึ้นมา!
จะปรับตัวอย่างไร?
โดยหลักการแล้ว หากคุณตั้งค่า wrapper block ให้มีความกว้างสูงสุดแทนที่จะเป็นความกว้างคงที่ ก็ไม่จำเป็นต้องปรับเปลี่ยนด้วยซ้ำ ในกรณีของฉัน ฉันมีคุณสมบัติความกว้างสูงสุด: 600px และเมื่อความกว้างน้อยกว่า 600 พิกเซล บล็อกจะย่อขนาดตามหน้าจอ โดยไม่ก่อให้เกิดการเลื่อนในแนวนอน
หากคุณต้องการเปลี่ยนหรือแก้ไขเมนูบนอุปกรณ์มือถือหรือหน้าจอกว้างคำสั่งสื่อจะช่วยคุณได้! ขอให้โชคดีในการสร้างเว็บไซต์!
สวัสดีตอนบ่าย
มักจำเป็นต้องสร้างเมนูแนวนอนที่จะขยายไปทั่วความกว้างทั้งหมดของบล็อกหลัก ไม่ว่าจะมีรายการจำนวนเท่าใดก็ตาม
วันนี้ฉันอยากจะแสดงวิธีการสร้างเมนูดังกล่าว
ดังนั้นเมนูของเราจะเป็นดังนี้:
มันถูกขยายจนเต็มความกว้างและโดดเด่นเมื่อวางเมาส์เหนือ เมนูจะโค้งมนด้านข้าง
มาร์กอัป HTML
| ... |
เพื่อให้เมนูเต็มความกว้าง ฉันใช้ตารางที่มีความกว้าง 100% แต่ละโต๊ะก็มี กองคอนเทนเนอร์รายการเมนู ขึ้นอยู่กับว่ารายการเมนูแรก รายการสุดท้าย หรือรายการกลางเป็น กอง-y ได้รับมอบหมายคลาสที่เหมาะสม
ในทุก กองคอนเทนเนอร์มีขอบ 2 ด้านพร้อมตำแหน่งที่แน่นอน ซึ่งจำเป็นสำหรับการแสดงผลที่ถูกต้อง หากคุณใช้เส้นขอบมาตรฐาน เมื่อคุณสลับรายการเมนู ข้อความจะกระโดด 1-2 พิกเซล ซึ่งถือว่าดี
ระดับ คล่องแคล่วรับผิดชอบรายการเมนูที่เลือกและไฮไลต์
ในแต่ละรายการจะมีรูปภาพและข้อความ เพื่อให้แน่ใจว่าทั้งหมดนี้จัดวางตรงกลางแนวตั้งอย่างเคร่งครัด เราจึงใช้ตาราง ด้วยคุณสมบัติการจัดตำแหน่งแนวตั้ง รายการเมนูของเราจึงจะแสดงได้อย่างราบรื่นและจะไม่เลื่อนออกไป
กฎ CSS
ขั้นแรก มากำหนดสไตล์สำหรับการแสดงเมนูทั่วไป:
Menu_container ( padding-top: 40px; ความกว้าง: 100%; ความสูง: 47px; ระยะห่างเส้นขอบ: 0px; ) .menu_container td ( แนวตั้ง: กลาง; /* การจัดตำแหน่งแนวตั้ง */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( ความกว้าง: 100%; ความสูง: 47px; เส้นขอบ: 1px solid #dadbda; ตำแหน่ง: สัมพันธ์; เส้นขอบซ้าย: ไม่มี); 150px; ช่องว่างภายใน: 4px; ) .td.inner_table_title ( ช่องว่างด้านบน: 4px; น้ำหนักแบบอักษร: ตัวหนา; ) .td.inner_table_img ( ความกว้าง: 40px!important; ) .inner_table_menu ( ความสูง: 100%; ช่องว่างภายใน: 0px ; แนวตั้ง: กลาง; เส้นขอบ: ไม่มี; การจัดตำแหน่งข้อความ: ซ้าย; ) .inner_table_title ( ช่องว่างภายใน: 10px; การขยายข้อความ: ตัวพิมพ์ใหญ่; ความสูงบรรทัด: 13px; ( width: 30px! สำคัญ; ความสูง: 30px! สำคัญ; ช่องว่างภายใน-ซ้าย: 15px; )
เพื่อความสวยงาม เรามาปัดมุมด้านข้างของเมนูกัน:
First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; ขอบบนซ้ายรัศมี: 5px; ขอบล่างซ้ายรัศมี: 5px; ขอบขวา: 1px ทึบ #dadbda; .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border - รัศมีล่างขวา: 5px; -moz-border-topright: 5px;
ตอนนี้เมนูของเรามีรูปลักษณ์ที่สวยงามยิ่งขึ้น:
จนถึงจุดแรกยังไม่มีขอบด้านซ้าย เราจะแก้ไขในภายหลังเล็กน้อย
ตอนนี้เรามาเพิ่มเอฟเฟ็กต์โฮเวอร์สำหรับเมนูกัน
Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( สีพื้นหลัง: #CAE285; ภาพพื้นหลัง: -moz-linear- การไล่ระดับสี(บนสุด, #CAE285, #9FCB56); -webkit-การไล่ระดับสี(เชิงเส้น, 0 0, 0 100%, จาก(#CAE285) ถึง(#9FCB56)); -gradient(บนสุด, #CAE285, #9FCB56); ภาพพื้นหลัง: -o-linear-gradient(top, #CAE285, #9FCB56); -สี: #aec671 #9fbb62 #87ac4a; ขอบซ้าย: ไม่มี; z-index: 5000; .first_point_menu:hover, .first_point_menu.active ( ขอบ: 1px solid #9FCB56; ขอบสี: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( เส้นขอบ: 1px solid #dadbda; border-left: none; ) .last_point_menu:hover ( เส้นขอบ: 1px solid #9FCB56; border-left: none;
สีขอบ: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( เส้นขอบซ้าย: ไม่มี; )
ตอนนี้เมนูของเราดูดีขึ้นมาก แต่สำหรับตอนนี้เราไม่มีขอบเขตสำหรับรายการเมนูที่ไฮไลต์ มาแก้ไขปัญหานี้กัน!
/* รูปแบบสำหรับเส้นขอบด้านข้าง */ .borderLeftSecond, .borderRightSecond ( display: none; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 1px; ความสูง: 47px; สีพื้นหลัง: #9fbb62; top: 0px; z-index: 1000; ) /* ออฟเซ็ตสัมบูรณ์สำหรับเส้นขอบ */ .borderLeftSecond ( left: 0px; ) , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* จัดการกรณีของ รายการแรกและรายการสุดท้าย */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )
แค่นั้นแหละ!
เลย์เอาต์ของเมนูไซต์ที่ค่อนข้างธรรมดา เมื่อคอนเทนเนอร์ที่มีเมนูนั้นครอบคลุมความกว้างทั้งหมดที่มีอยู่ในเพจ ในกรณีนี้ รายการแรกอยู่ติดกับขอบด้านซ้าย และรายการสุดท้ายอยู่ติดกับด้านขวา และระยะห่างระหว่างองค์ประกอบทั้งหมดจะเท่ากัน วันนี้เราจะบอกคุณว่าสิ่งนี้เสร็จสิ้นแล้ว
เราขอเสนอตัวอย่างการใช้งานเมนูยางโดยใช้ CSS สำหรับทรัพยากรของคุณ ในเมนูนี้รายการจะอยู่ในบรรทัดเดียว จาวาสคริปต์จะไม่ถูกนำมาใช้ เนื้อหาของเมนูจะรวมอยู่ในรายการปกติ คุณสมบัติหลักของเมนูดังกล่าวคือความสามารถรอบด้านซึ่งแสดงออกมาว่าทั้งจำนวนและความยาวของรายการสามารถมีได้
จะปฏิบัติสิ่งนี้ได้อย่างไร?
โปรแกรมเมอร์แต่ละคนสามารถเสนอวิธีแก้ปัญหาของตนเองได้ ทุกอย่างขึ้นอยู่กับจินตนาการ ระดับความเป็นมืออาชีพ และความสามารถของเขา วิธีแก้ปัญหาที่พบบ่อยที่สุดสำหรับปัญหานี้คือการใช้ตาราง นอกจากนี้ หลายๆ คนยังแนะนำให้ใช้จาวาสคริปต์อีกด้วย ผู้ที่จะแนะนำให้ใช้คุณสมบัติการแสดงผลที่มีค่า โต๊ะหรือ ตารางเซลล์- ฉันรีบทำให้ผิดหวัง วิธีการนี้ไม่สามารถใช้งานข้ามเบราว์เซอร์ได้เพียงพอ
โซลูชั่นของเรา
ข้อเสนอของเราจะสร้างขึ้นบนรากฐานที่มั่นคงของความรู้ HTML5 และ CSS3
สาระสำคัญของกระบวนการนี้ขึ้นอยู่กับคุณสมบัติการจัดแนวข้อความด้วยค่าเหตุผล สำหรับผู้ที่ลืม ฉันขอเตือนคุณว่า: คุณสมบัตินี้จะวางแนวการจัดแนวข้อความให้ทั่วทั้งความกว้างของคอนเทนเนอร์
เมื่อใช้โซลูชันของเรา จะต้องปฏิบัติตามกฎบังคับสองข้อ ประการแรกคือความกว้างของคอนเทนเนอร์รายการเมนูควรเล็กกว่าข้อความ นั่นคือไม่ได้อยู่ในบรรทัดเดียว กฎสำคัญประการที่สองคือคำต่างๆ จะต้องยืดออกเท่าๆ กัน ไม่ว่าคำเหล่านั้นจะอยู่ในจุดเดียวกันหรือไม่ก็ตาม
ด้านล่างนี้เป็นโค้ดที่ใช้เป็นตัวอย่างในการสร้างเมนูยาง:
HTML
< ul> < li>< a href= "#" >บ้าน < li>< a href= "#" >บล็อก < li>< a href= "#" >ข่าว < li>< a href= "#" >เป็นที่นิยม < li>< a href= "#" >สินค้าใหม่
ul ( text- align: justify; overflow: ซ่อนเร้น; /* กำจัดผลข้างเคียงของวิธีการ */ความสูง: 20px; /* ยังกำจัดสิ่งที่ไม่จำเป็นออกไปด้วย */เคอร์เซอร์: ค่าเริ่มต้น ; /* กำหนดรูปร่างเริ่มต้นของเคอร์เซอร์ */ระยะขอบ: 50px 100px 0 100px; พื้นหลัง: #eee;ช่องว่างภายใน: 5px; ) li ( จอแสดงผล: อินไลน์;/* ทำให้รายการเมนูข้อความ */ ) li a ( จอแสดงผล: อินไลน์- บล็อก;/* ยกเลิกการแบ่งคำในเมนู */
หากต้องการทำงานใน Internet Explorer รุ่นเก่า คุณต้องเพิ่มโค้ดต่อไปนี้ใน CSS เพิ่มเติม
ul ( ดัชนี z: expression(runtimeStyle.zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( ขอบซ้าย: 100%; ) * html ul ( /* need ie6 only */ height: 30px; )
เมื่อระบุค่าคุณสมบัติและรหัสที่จำเป็นแล้ว เราจะได้เมนูยางนี้:
ข้อเสียของวิธีการ
- รหัสวอลุ่ม
- ไม่สามารถระบุสถานะที่ใช้งานอยู่ขององค์ประกอบผ่านตัวเลือกคลาสได้ สิ่งนี้เกิดขึ้นเนื่องจากการแตกคำในย่อหน้า (ถ้ามี) วิธีแก้ไขปัญหานี้คือการเพิ่มคอนเทนเนอร์อื่นภายในองค์ประกอบรายการ
- สำหรับเมนูแบบเลื่อนลง คุณจะต้องปรับแต่งโค้ดเนื่องจากผลกระทบด้านลบของโอเวอร์โฟลว์
มันทำงานในเบราว์เซอร์อะไร?
| 6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
เมนูแนวนอนเป็นรายการส่วนของเว็บไซต์ ดังนั้นจึงสมเหตุสมผลมากกว่าที่จะทำเครื่องหมายไว้ภายในองค์ประกอบ
- จากนั้นใช้สไตล์ CSS กับองค์ประกอบ เค้าโครงเมนูนี้เป็นรูปแบบที่พบบ่อยที่สุดเนื่องจากมีข้อได้เปรียบที่ชัดเจนในการวางตำแหน่งบนหน้าเว็บ
- รายการเมนู
- รายการเมนู
- รายการเมนู ...
วิธีทำเมนูแนวนอน: ตัวอย่างเค้าโครงและการออกแบบ
มาร์กอัป HTML และสไตล์พื้นฐานสำหรับเมนูแนวนอน
ตามค่าเริ่มต้น รายการทั้งหมดจะอยู่ที่ แนวตั้งซึ่งครอบครองความกว้างทั้งหมดขององค์ประกอบคอนเทนเนอร์ ซึ่งจะครอบครองความกว้างทั้งหมดของบล็อกคอนเทนเนอร์
มาร์กอัป HTML สำหรับการนำทางแนวนอน
เมนูแนวนอนที่อยู่ภายในแท็กสามารถวางเพิ่มเติมภายในองค์ประกอบได้ และ/หรือ
มีหลายวิธีในการวาง แนวนอน- ขั้นแรก คุณต้องรีเซ็ตสไตล์เบราว์เซอร์เริ่มต้นสำหรับองค์ประกอบการนำทาง:
Ul ( list-style: none; /*remove list markers*/ margin: 0; /*ลบระยะขอบด้านบนและด้านล่างเท่ากับ 1em*/ padding-left: 0; /*ลบ padding ด้านซ้ายเท่ากับ 40px*/ ) a ( การตกแต่งข้อความ: none; /*ลบการขีดเส้นใต้ข้อความลิงก์*/)
วิธีที่ 1. li (จอแสดงผล: อินไลน์;)
ทำให้องค์ประกอบรายการเป็นตัวพิมพ์เล็ก ด้วยเหตุนี้ พวกมันจึงถูกวางในแนวนอน โดยมีช่องว่าง 0.4em เพิ่มทางด้านขวาระหว่างพวกมัน (คำนวณโดยสัมพันธ์กับขนาดตัวอักษร) หากต้องการลบออก ให้เพิ่มระยะขอบขวาเป็นลบสำหรับ li li (margin-right: -4px;) ต่อไปเราจะจัดรูปแบบลิงก์ตามที่เราต้องการ
วิธีที่ 2. li (ลอย: ซ้าย;)
ทำให้องค์ประกอบรายการลอยตัว ส่งผลให้วางในแนวนอน ความสูงของบล็อกคอนเทนเนอร์ ul กลายเป็นศูนย์ เพื่อแก้ปัญหานี้ เราเพิ่ม (overflow: Hidden;) ให้กับ ul เพื่อขยายและอนุญาตให้มีองค์ประกอบลอยตัว สำหรับลิงก์ ให้เพิ่ม (display: block;) และจัดรูปแบบตามที่คุณต้องการ
วิธีที่ 3. li (จอแสดงผล: inline-block;)
การสร้างองค์ประกอบรายการแบบอินไลน์บล็อก ตั้งอยู่ในแนวนอนมีช่องว่างเกิดขึ้นทางด้านขวาเช่นในกรณีแรก สำหรับลิงก์ ให้เพิ่ม (display: block;) และจัดรูปแบบตามที่คุณต้องการ
วิธีที่ 4. ul (จอแสดงผล: flex;)
ทำให้รายการ ul เป็นคอนเทนเนอร์ที่ยืดหยุ่นโดยใช้นามสกุล . ด้วยเหตุนี้ องค์ประกอบรายการจึงถูกจัดเรียงในแนวนอน เราเพิ่ม (display: block;) สำหรับลิงก์และจัดรูปแบบตามต้องการ