リストアイテム内のリンクの高さがリスト要素よりも高くなっています-何が起こっているのでしょうか?

Aug 19 2020

私がしている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のピンクの背景の高さよりも大きくなります。

リンクの高さをフォントサイズの高さに制限する方法がない限り、この違いを考慮して行の高さを増やす必要があります。

このJSFiddleは、リンクがフォントサイズよりも大きいことを示しています。 https://jsfiddle.net/utqafz61/

...したがって、行の高さがフォントサイズ(1em)と同じである場合、リンクがオーバーラップし、正しいリンクをクリックするのが困難になります。私はこのウェブサイトでこれに最初に気づきました:https://www.hassellstudio.comナビゲーションメニューでは、リンクが重なっています。マウスポインタは1つのリンク上に置くことができますが、以下のリンクが強調表示されています。

回答

UmutambyiGad Aug 19 2020 at 19:53

あなたがやっていた奇妙なことは、設定することがあるfont-sizenavの親であるul li10rem彼らが大きく作られたともしていたことline-height、実際と異なっているheightだけでは、ここにSEline-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>

JHeth Aug 19 2020 at 19:57

要素に追加display: inline-blockするだけaです。

アンカータグは、ユーザーエージェントのスタイルシートによって自然にインライン化されます。これがオーバーフローの原因です。

FluffyKitten Aug 19 2020 at 19:54

問題はline-heightナビゲーション内にあり、行の間にスペースがありません()line-height:1emはfont-size(50px)と同じように割り当てられているだけなので、文字の周りにデフォルトのスペースを置くスペースがありません) 。line-height大きくすることができます(1.1emは上記のコードで動作します):

nav { line-height: 1.1em; } 

または、デフォルトを使用するように完全に削除します。

更新:

行の高さを1emから変更できない場合、これを達成するための問題を引き起こしている2つの基本的な問題があります。

  1. a タグはデフォルトでインラインであるため、マージンやパディングなどの操作が難しくなります。
  2. ほとんどのフォントには、アセンダーとディセンダーが触れないように上下に余分なスペースがあります。これは、フォントグリフ自体に依存します。一部のフォントは他のフォントより「悪い」です。

li次の方法を使用して、リンクを強制的に外部にオーバーフローさせないようにすることができます。これにより、マウスが1つのリンク上にあるように見えても、実際には別のリンクがアクティブになる効果が防止されます。

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>

それは私が思いつくことができる限り良いです、それらのオプションの1つが適切であることを願っています!