Tautan di dalam item daftar memiliki tinggi lebih besar dari elemen daftar - apa yang terjadi?

Aug 19 2020

Saya memiliki navdaftar tautan yang berisi. Daftar tersebut memiliki line-height: 1em. Namun tautan memiliki tinggi lebih dari 1emdan 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-bottomke 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:1emke 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: 50pxtinggi 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-blocktampilan 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

UmutambyiGad Aug 19 2020 at 19:53

hal aneh yang Anda lakukan adalah untuk mengatur font-sizedari navyang tua dari ul liuntuk 10remyang telah membuat mereka lebih besar dan juga line-heightberbeda dari yang sebenarnya heighthanya 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>

JHeth Aug 19 2020 at 19:57

Tambahkan saja display: inline-blockke aelemen Anda .

Tag jangkar secara alami dibuat sebaris oleh stylesheet agen pengguna yang menyebabkan luapan Anda.

FluffyKitten Aug 19 2020 at 19:54

Masalahnya adalah dengan line-heightdi 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-heightlebih 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:

  1. a tag sebaris secara default yang membuatnya lebih sulit untuk bekerja dengan margin & padding, dll.
  2. 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 limenggunakan 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 amenjadi 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:hiddenpada litanaman 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!