ลิงก์ภายในรายการมีความสูงมากกว่าองค์ประกอบรายการเกิดอะไรขึ้น?
ฉันมีnav
รายชื่อลิงค์ รายการมีไฟล์line-height: 1em
. อย่างไรก็ตามลิงก์มีความสูงมากกว่า1em
และทับซ้อนกับรายการก่อนหน้าทำให้คลิกรายการได้ยาก
nav {
height: 100%;
overflow: hidden;
position: absolute;
top: 7.2rem;
left: 0;
right: 0;
font-size: 50px;
line-height: 1em;
}
nav li {
background-color: green;
}
nav a {
background-color: pink;
}
<nav>
<ul>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="ethical-design.html">Ethics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

สิ่งนี้สามารถมองเห็นได้ง่ายขึ้นถ้าฉันเพิ่มmargin-bottom
ไฟล์nav li
. ลิงก์ (สีชมพู) มีความสูงมากกว่าความสูงบรรทัดของรายการ (สีเขียว):

ฉันจะทำให้ลิงก์มีความสูงเท่ากับรายการได้อย่างไร เพื่อให้ไม่มีการทับซ้อน?
บันทึก. ไม่มีช่องว่างภายในลิงก์ดังนั้นฉันจึงไม่รู้ว่าทำไมจึงมีขนาดใหญ่กว่า มันไม่ได้สร้างความแตกต่างใด ๆ ถ้าฉันเพิ่มheight:1em
ในไฟล์nav a
. ฉันได้ลอง display: inline-block - ซึ่งทำให้พื้นหลังสีชมพูมีความสูงเท่ากับพื้นหลังสีเขียว แต่ลิงก์ยังคงสามารถคลิกได้ที่ด้านบนและด้านล่างของพื้นหลังสีชมพู! พื้นที่ที่คลิกได้ไม่ได้ จำกัด อยู่ที่พื้นหลังสีชมพู
ข้อมูลใหม่
ลิงก์มีความสูงมากกว่าไฟล์font-size
.
ขนาดของลิงก์ไม่ได้รับอิทธิพลจากไฟล์line-height
.
ตัวอย่างเช่นบรรทัดข้อความที่font-size: 50px
มีความสูง 50px แต่ลิงก์ภายในบรรทัดข้อความมีความสูง 68px (ไม่มีช่องว่างภายในหรือขอบบนลิงก์)
ฉันคิดว่าพื้นที่ที่คลิกได้รอบ ๆ ลิงก์จะต้องคำนึงถึงผู้ขึ้นและผู้สืบทอดทั้งหมดของแบบอักษรด้วย และนี่คือสาเหตุที่มีความสูงมากกว่าขนาดตัวอักษร
ดังนั้นหากตั้งค่าความสูงของบรรทัดเป็น 1em ลิงก์จะทับซ้อนกัน การใช้display: inline-block
แสดงพื้นหลังสีชมพูว่ามีความสูงเท่ากับพื้นหลังสีเขียว แต่ (แปลกดี) พื้นที่ที่คลิกได้ยังคงมีขนาดใหญ่กว่าความสูงของพื้นหลังสีชมพู 50px
เว้นแต่จะมีวิธี จำกัด ความสูงของลิงก์กับความสูงของขนาดฟอนต์ฉันจะต้องเพิ่มความสูงของบรรทัดเพื่อรองรับความแตกต่างนี้
JS Fiddle นี้แสดงให้เห็นว่าลิงก์มีขนาดใหญ่กว่าขนาดตัวอักษรอย่างไร: https://jsfiddle.net/utqafz61/
... ดังนั้นหากความสูงของบรรทัดเท่ากับขนาดตัวอักษร (1em) ลิงก์จะทับซ้อนกันทำให้คลิกลิงก์ที่ถูกต้องได้ยาก ฉันสังเกตเห็นสิ่งนี้เป็นครั้งแรกในเว็บไซต์นี้:https://www.hassellstudio.comบนเมนูการนำทางลิงก์จะทับซ้อนกัน ตัวชี้เมาส์สามารถอยู่ในลิงค์เดียว แต่ลิงก์ด้านล่างนี้จะถูกไฮไลต์!
คำตอบ
สิ่งที่แปลกที่คุณกำลังทำคือการตั้งค่าfont-size
ของnav
ซึ่งเป็นแม่ของul li
การ10rem
ที่ทำให้พวกเขาที่ใหญ่กว่าและยังline-height
แตกต่างจากที่เกิดขึ้นจริงheight
เพียง se ที่นี่line-height
ตัวอย่าง
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
top: 7.2rem;
left: 0;
right: 0;
/* font-size: 10rem;*/
}
nav li {
margin: 10px;
background-color: green;
}
nav a {
background-color: pink;
}
<nav>
<ul>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="ethical-design.html">Ethics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
เพียงเพิ่มองค์ประกอบdisplay: inline-block
ของคุณa
แท็ก Anchor จะถูกแทรกในสไตล์ชีตของตัวแทนผู้ใช้ซึ่งเป็นสาเหตุที่ทำให้คุณล้น
ปัญหาเกิดจากline-height
ใน nav ของคุณมันไม่ได้ให้ช่องว่างระหว่างบรรทัด () line-height: 1em จัดสรรให้เหมือนกับขนาดตัวอักษร (50px) เท่านั้นจึงไม่มีที่ว่างสำหรับช่องว่างเริ่มต้นรอบตัวอักษร) . คุณสามารถทำให้line-height
ใหญ่ขึ้นได้ (1.1em จะทำงานร่วมกับโค้ดของคุณด้านบน):
nav { line-height: 1.1em; }
หรือเพียงแค่ลบออกทั้งหมดเพื่อให้ใช้ค่าเริ่มต้น
อัพเดท:
หากคุณไม่สามารถเปลี่ยนความสูงของเส้นจาก 1em ได้มีปัญหาพื้นฐาน 2 ประการที่ทำให้เกิดปัญหาในการดำเนินการนี้:
a
แท็กจะอยู่ในบรรทัดตามค่าเริ่มต้นซึ่งทำให้ยากต่อการทำงานกับระยะขอบและช่องว่าง ฯลฯ- แบบอักษรส่วนใหญ่จะมีพื้นที่พิเศษบนและด้านล่างเพื่อให้ ascenders descenders และไม่ได้สัมผัส - นี้จะลงไปร่ายมนตร์อักษรของตัวเอง แบบอักษรบางแบบ "แย่กว่า" แบบอื่น
คุณสามารถบังคับไม่ให้ลิงก์ล้นออกไปภายนอกได้li
โดยใช้สิ่งต่อไปนี้และจะป้องกันไม่ให้เอฟเฟกต์ที่คุณเห็นว่าเมาส์ดูเหมือนอยู่บนลิงค์เดียว แต่เปิดใช้งานอีกลิงค์หนึ่งจริงๆ:
nav li {
background-color: green;
overflow: hidden; /* this will crop off anything outside the element */
}
อย่างไรก็ตามขึ้นอยู่กับแบบอักษรสิ่งนี้สามารถครอบตัดส่วนเล็ก ๆ ออกจากส่วนย่อยของตัวอักษร
ตัวอย่างข้อมูลการทำงาน:
ul {
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
list-style: none;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
line-height: 1em;
font-size: 3rem;
font-family: "Times New Roman";
}
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
}
nav li:hover a{
background-color: yellow;
}
<nav>
<ul>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="ethical-design.html">Ethics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
ไม่มีวิธีง่ายๆในการแก้ไขปัญหานี้โดยไม่ต้องเปลี่ยนความสูงของเส้น (แม้แต่เล็กน้อย) แต่ฉันลองแฮ็กต่างๆเพื่อดูว่าเราสามารถย้ายข้อความลิงก์ขึ้นสองสามพิกเซลได้หรือไม่โดยไม่ต้องย้ายลิงก์ที่ใช้งานอยู่
ถ้ามันเป็นไปได้สำหรับคุณที่จะทำให้การa
ที่จะdisplay: block
แล้วนี้ดูเหมือนว่าจะทำงาน:
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
display: block;
/* tweak the values below to suit */
margin-top: -2px;
padding-bottom: 2px;
}
วิธีแก้ไข: ใช้ overflow: hidden, negative margin และ padding เป็นวิธีแก้ปัญหานี้
ระยะขอบเชิงลบจะเลื่อนขึ้นไปที่ด้านบนสุดของลิงก์ (ซึ่งมีช่องว่างพิเศษ) และช่องว่างภายในจะเพิ่มช่องว่างเล็กน้อยสำหรับการเลื่อนลง òverflow:hidden
ในli
พืชปิดพิเศษ
คุณสามารถดูการทำงานด้านล่าง - โปรดทราบว่าฉันได้เพิ่มระยะขอบและช่องว่างภายในมากเกินไปเพื่อให้แน่ใจว่าทำงานได้โดยไม่มีการทับซ้อนกันและฉันได้เพิ่มเส้นขอบรอบ ๆ ลิงก์เพื่อให้ชัดเจนว่าลิงก์อยู่ที่ใด:
ul {
margin: 0;
padding: 0;
border: 0;
vertical-align: top;
list-style: none;
}
nav {
height: 100%;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
line-height: 1em;
font-size: 3rem;
font-family: "Times New Roman";
}
nav li {
background-color: green;
overflow: hidden;
}
nav a {
background-color: pink;
display: block;
margin-top: -20px;
padding-bottom: 20px;
border:1px solid blue;
}
nav li:hover a{
background-color: yellow;
}
<nav>
<ul>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="ethical-design.html">Ethics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
ดีที่สุดเท่าที่จะทำได้หวังว่าหนึ่งในตัวเลือกเหล่านั้นจะเหมาะสม!