リストアイテム内のリンクの高さがリスト要素よりも高くなっています-何が起こっているのでしょうか?
私がしている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つのリンク上に置くことができますが、以下のリンクが強調表示されています。
回答
あなたがやっていた奇妙なことは、設定することがあるfont-size
のnav
の親であるul li
と10rem
彼らが大きく作られたともしていたこと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>
要素に追加display: inline-block
するだけa
です。
アンカータグは、ユーザーエージェントのスタイルシートによって自然にインライン化されます。これがオーバーフローの原因です。
問題はline-height
ナビゲーション内にあり、行の間にスペースがありません()line-height:1emはfont-size(50px)と同じように割り当てられているだけなので、文字の周りにデフォルトのスペースを置くスペースがありません) 。line-height
大きくすることができます(1.1emは上記のコードで動作します):
nav { line-height: 1.1em; }
または、デフォルトを使用するように完全に削除します。
更新:
行の高さを1emから変更できない場合、これを達成するための問題を引き起こしている2つの基本的な問題があります。
a
タグはデフォルトでインラインであるため、マージンやパディングなどの操作が難しくなります。- ほとんどのフォントには、アセンダーとディセンダーが触れないように上下に余分なスペースがあります。これは、フォントグリフ自体に依存します。一部のフォントは他のフォントより「悪い」です。
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つが適切であることを願っています!