Tautan di dalam item daftar memiliki tinggi lebih besar dari elemen daftar - apa yang terjadi?
Saya memiliki nav
daftar tautan yang berisi. Daftar tersebut memiliki line-height: 1em
. Namun tautan memiliki tinggi lebih dari 1em
dan tumpang tindih dengan item daftar sebelumnya, sehingga sulit untuk mengeklik item.
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>

Hal ini dapat dilihat lebih mudah jika saya menambahkan margin-bottom
ke nav li
. Tautan (merah muda) memiliki tinggi yang lebih tinggi daripada tinggi baris item daftar (hijau):

Bagaimana cara agar tautan memiliki tinggi yang sama dengan item daftar? Agar tidak ada tumpang tindih?
Catatan. tidak ada padding pada tautan, jadi saya tidak tahu mengapa mereka lebih besar. Tidak ada bedanya jika saya menambahkan height:1em
ke nav a
. Saya sudah mencoba display: inline-block - yang membuat latar belakang merah muda sama tingginya dengan latar belakang hijau, tetapi anehnya tautan masih dapat diklik tepat di atas dan di bawah latar belakang merah muda! Area yang dapat diklik tidak terbatas pada latar belakang merah muda.
INFO BARU
Tautan memiliki tinggi yang lebih besar dari font-size
.
Ukuran tautan sama sekali tidak dipengaruhi oleh line-height
.
Misalnya baris teks dengan font-size: 50px
tinggi 50px. Namun link di dalam baris teks memiliki tinggi 68px (tidak ada padding atau margin pada link tersebut).
Saya menganggap area yang dapat diklik di sekitar tautan harus memperhitungkan semua ascenders dan descenders dari jenis huruf tersebut. Dan inilah mengapa ia memiliki tinggi yang lebih besar dari ukuran fontnya.
Oleh karena itu, jika tinggi baris diatur ke 1em, tautan akan tumpang tindih. Menggunakan display: inline-block
tampilan latar belakang merah muda sama tingginya dengan latar belakang hijau, tetapi, (anehnya) area yang dapat diklik masih lebih besar dari tinggi latar belakang merah muda 50 piksel.
Kecuali jika ada cara untuk membatasi tinggi tautan ke tinggi ukuran font, maka saya harus meningkatkan tinggi baris untuk memperhitungkan perbedaan ini.
JS Fiddle ini menunjukkan bagaimana tautan lebih besar dari ukuran font: https://jsfiddle.net/utqafz61/
... jadi jika tinggi baris sama dengan ukuran font (1em) maka link akan tumpang tindih sehingga sulit untuk mengklik link yang tepat. Saya pertama kali memperhatikan ini di situs web ini:https://www.hassellstudio.comdi menu navigasi, tautannya tumpang tindih. Penunjuk tetikus dapat berada di satu tautan, tetapi tautan di bawah ini disorot!
Jawaban
hal aneh yang Anda lakukan adalah untuk mengatur font-size
dari nav
yang tua dari ul li
untuk 10rem
yang telah membuat mereka lebih besar dan juga line-height
berbeda dari yang sebenarnya height
hanya se disiniline-height
contoh
* {
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>
Tambahkan saja display: inline-block
ke a
elemen Anda .
Tag jangkar secara alami dibuat sebaris oleh stylesheet agen pengguna yang menyebabkan luapan Anda.
Masalahnya adalah dengan line-height
di nav Anda, itu tidak memberikan spasi di antara baris () line-height: 1em hanya mengalokasikan sama dengan ukuran font (50px) sehingga tidak ada ruang untuk ruang default di sekitar huruf) . Anda dapat membuat line-height
lebih besar (1.1em akan bekerja dengan kode Anda di atas):
nav { line-height: 1.1em; }
Atau hapus saja semuanya sehingga menggunakan default.
MEMPERBARUI:
Jika Anda tidak dapat mengubah tinggi baris dari 1em, ada 2 masalah mendasar yang menyebabkan masalah untuk mencapai ini:
a
tag sebaris secara default yang membuatnya lebih sulit untuk bekerja dengan margin & padding, dll.- kebanyakan font memiliki ruang ekstra di atas dan di bawah sehingga ascenders dan descenders tidak menyentuh - ini tergantung pada font glyph itu sendiri . Beberapa font "lebih buruk" dari yang lain.
Anda dapat memaksa tautan agar tidak meluap keluar li
menggunakan yang berikut ini, dan ini akan mencegah efek yang Anda lihat di mana mouse terlihat di atas satu tautan tetapi sebenarnya mengaktifkan yang lain:
nav li {
background-color: green;
overflow: hidden; /* this will crop off anything outside the element */
}
Namun tergantung pada font-nya, ini bisa memotong sebagian kecil dari keturunan huruf.
Cuplikan kerja:
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>
Tidak ada cara mudah untuk mengatasi ini tanpa mengubah tinggi baris (bahkan sedikit), tetapi saya mencoba berbagai peretasan untuk melihat apakah kita dapat memindahkan teks tautan ke atas beberapa piksel tanpa memindahkan tautan aktif.
Jika memungkinkan bagi Anda untuk membuatnya a
menjadi display: block
, maka ini tampaknya berhasil:
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;
}
Solusi: Gunakan overflow: hidden, margin negatif, dan padding sebagai solusinya
Margin negatif naik ke atas tautan (yang memiliki ruang ekstra) dan bantalan menambahkan sedikit ruang untuk penurunan. The òverflow:hidden
pada li
tanaman off ekstra.
Anda dapat melihatnya bekerja di bawah - Perhatikan saya telah sangat melebih - lebihkan margin dan padding untuk memastikan bahwa itu berfungsi tanpa tumpang tindih, dan saya menambahkan batas di sekitar tautan untuk memperjelas di mana tautan itu berada:
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>
Itu sebaik yang bisa saya pikirkan, semoga salah satu opsi itu cocok!