Liste öğelerinin içindeki bağlantıların yüksekliği liste öğesinden daha büyük - neler oluyor?

Aug 19 2020

Ben var navbağlantıların bir listesini içeren. Listede bir line-height: 1em. Bununla birlikte, bağlantıların yüksekliği 1emönceki liste öğesinden daha büyüktür ve üst üste gelir, bu da öğelerin tıklanmasını zorlaştırır.

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>

Ben eklerseniz, bu daha kolay görülebilir margin-bottomiçin nav li. Bağlantılar (pembe), liste öğelerinin satır yüksekliğinden (yeşil) daha büyüktür:

Bağlantıların liste öğeleriyle aynı yüksekliğe sahip olmasını nasıl sağlayabilirim? Böylece örtüşme yok mu?

Not. bağlantılarda dolgu yok, bu yüzden neden daha büyük olduklarını bilmiyorum. Ben eklerseniz herhangi bir fark yapmaz height:1emiçin nav a. Göstermeyi denedim: inline-block - bu, pembe arka planı yeşil arka planla aynı yükseklikte yapar, ancak garip bir şekilde bağlantılar pembe arka planın hemen üstünde ve altında tıklanabilir durumda! Tıklanabilir alan pembe arka planla sınırlı değildir.

YENİ BİLGİ

Bağlantıların yüksekliği font-size.

Bağlantının boyutu hiçbir şekilde line-height.

Örneğin font-size: 50px, yüksekliği 50px olan bir metin satırı . Yine de metin satırının içindeki bağlantının yüksekliği 68px'dir (bağlantıda dolgu veya kenar boşluğu yoktur).

Bağlantının etrafındaki tıklanabilir alanın, yazı tipinin tüm yükselen ve altsoylarını hesaba katması gerektiğini varsayıyorum. Ve bu yüzden yazı tipi boyutundan daha yüksek bir yüksekliğe sahiptir.

Dolayısıyla, satır yüksekliği 1em olarak ayarlanmışsa, bağlantılar çakışır. Kullanımı display: inline-blockpembe arka planı yeşil arka planla aynı yükseklikte görüntüler, ancak (garip bir şekilde) tıklanabilir alan hala 50 piksel pembe arka plan yüksekliğinden daha büyüktür.

Bağlantının yüksekliğini yazı tipi boyutunun yüksekliğiyle sınırlamanın bir yolu olmadıkça, bu farkı hesaba katmak için satır yüksekliğini artırmam gerekecek.

Bu JS Fiddle, bağlantıların yazı tipi boyutundan ne kadar büyük olduğunu gösterir: https://jsfiddle.net/utqafz61/

... bu nedenle, satır yüksekliği yazı tipi boyutuyla (1em) aynıysa, bağlantılar üst üste gelecek ve doğru bağlantıya tıklamayı zorlaştıracaktır. Bunu ilk olarak bu web sitesinde fark ettim:https://www.hassellstudio.comgezinme menüsünde bağlantılar çakışıyor. Fare işaretçisi tek bir bağlantı üzerinde olabilir, ancak aşağıdaki bağlantı vurgulanmıştır!

Yanıtlar

UmutambyiGad Aug 19 2020 at 19:53

Eğer yaptıklarını garip şey ayarlamaktır font-sizeait navolan üstüdür ul liiçin 10rembu onları daha büyük yapmış ve aynı zamanda line-heightgerçek farklı heightsadece burada seline-height

misal

* {
  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

Sadece eklemek display: inline-blockiçin için aelemanlar.

Bağlantı etiketleri, taşmanıza neden olan kullanıcı aracısı stil sayfaları tarafından doğal olarak satır içine alınır.

FluffyKitten Aug 19 2020 at 19:54

Sorun, line-heightnav'inizde, satırlar arasında herhangi bir boşluk bırakmamasıdır () satır yüksekliği: 1em yalnızca yazı tipi boyutu (50px) ile aynı yeri ayırıyor, bu nedenle harflerin etrafında varsayılan boşluk için yer yok) . Daha line-heightbüyük yapabilirsiniz (1,1em yukarıdaki kodunuzla çalışır):

nav { line-height: 1.1em; } 

Ya da tamamen kaldırın, böylece varsayılanı kullanır.

GÜNCELLEME:

Hat yüksekliğini 1em'den değiştiremezseniz, bunu başarmak için sorunlara neden olan 2 temel sorun vardır:

  1. a etiketler varsayılan olarak satır içi olup, kenar boşlukları ve dolgu vb. ile çalışmayı zorlaştırır.
  2. çoğu yazı tipinin üstünde ve altında fazladan boşluk vardır, böylece yükselenler ve alt çizgiler birbirine değmez - bu yazı tipi gliflerinin kendisidir . Bazı yazı tipleri diğerlerinden "daha kötüdür".

liAşağıdakileri kullanarak bağlantıyı dışarı taşmamaya zorlayabilirsiniz ve bu, farenin bir bağlantı üzerinde göründüğü, ancak aslında bir başkasını etkinleştirdiği yerde gördüğünüz etkiyi engeller:

nav li {
    background-color: green;
    overflow: hidden;        /* this will crop off anything outside the element */
}

Ancak yazı tipine bağlı olarak, bu, harflerin soyundan gelen küçük bir kısmı kırpabilir.

Çalışma pasajı:

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>

Satır yüksekliğini (biraz da olsa) değiştirmeden bunu aşmanın kolay bir yolu yok, ancak bağlantı metnini aktif bağlantıyı hareket ettirmeden birkaç piksel yukarı taşıyıp taşıyamayacağımızı görmek için çeşitli hackler denedim.

Yapmak mümkün değilse aolmak display: block, o zaman bu işe görünüyor:

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;
}

Çözüm: Geçici çözüm olarak taşma: gizli, negatif kenar boşluğu ve dolgu kullanın

Negatif kenar boşluğu, bağlantının (fazladan boşluğa sahip olan) üst kısmına doğru hareket eder ve dolgu, alçaltıcı için küçük bir alan ekler. òverflow:hiddenÜzerinde liekstra kapalı bitkileri.

Aşağıda çalıştığını görebilirsiniz - Not Üst üste binmeden çalıştığından emin olmak için kenar boşluğunu ve dolguyu büyük ölçüde abarttım ve bağlantının nerede olduğunu netleştirmek için bağlantıların etrafına bir kenarlık ekledim:

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>

Bulabildiğim kadar iyi, umarım bu seçeneklerden biri uygundur!