列表项内的链接的高度大于list元素的高度-这是怎么回事? [英] Links inside list items have a height greater than the list element - what's going on?

问题描述

我有一个 nav ，其中包含链接列表.该列表具有 line-height:1em .但是，链接的高度大于 1em ，并且与前面的列表项重叠，因此很难单击这些项.

I have a nav containing a list of links. The list has a line-height: 1em. However the links have a height greater than 1em and overlap the preceeding list item, making it hard to click the items.

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 ，则可以更容易地看到这一点.链接(粉红色)的高度大于列表项(绿色)的行高:

This can be seen more easily if I add margin-bottom to the nav li. The links (pink) have greater height than the line-height of the list items (green):

如何使链接的高度与列表项的高度相同?这样就没有重叠了吗?

How do I get the links to have the same height as the list items? So that there is no overlapping?

注意.链接上没有填充，所以我不知道为什么它们更大.如果将 height:1em 添加到 nav ，这没有任何区别.我尝试过display:inline-block-使粉红色背景与绿色背景具有相同的高度，但是奇怪的是，在粉红色背景的上方和下方仍然可以单击链接！可点击区域不限于粉红色背景.

Note. there is no padding on the links, so I don't know why they are larger. It doesn't make any difference if I add height:1em to the nav a. I've tried display:inline-block - which makes the pink background the same height as the green background, but strangely the links are still clickable just above and below the pink background! The clickable area isn't confined to the pink background.

新信息

链接的高度大于 font-size .

链接的大小绝不受 line-height 的影响.

The size of the link is in no way influenced by the line-height.

例如，一行 font-size:50px 的文本行的高度为50px.文本行内的链接的高度为68px(链接上没有填充或边距).

For example a line of text with font-size: 50px has a height of 50px. Yet the link inside the line of text has a height of 68px (there is no padding or margin on the link).

我认为链接周围的可点击区域必须考虑字体的所有升序和降序.这就是为什么它的高度比font-size更大的原因.

I presume the clickable area around the link has to take into account all the ascenders and descenders of the typeface. And this is why it has a greater height than the font-size.

因此，如果将行高设置为1em，则链接重叠.使用 display:inline-block 将粉红色背景显示为与绿色背景相同的高度，但是(奇怪的是)可点击区域仍大于50px粉红色背景高度.

Hence if the line-height is set to 1em the links overlap. Using display: inline-block displays the pink background as being the same height as the green background, but, (strangely) the clickable area is still larger than the 50px pink background height.

除非有一种方法可以将链接的高度限制为font-size的高度，否则我将不得不增加line-height来解决这种差异.

Unless there is a way to constrain the height of the link to the height of the font-size, then I will have to increase the line-height to account for this difference.

此JS小提琴展示了链接如何大于字体大小: https://jsfiddle.net/utqafz61/

This JS Fiddle shows how the links are bigger than the font-size: https://jsfiddle.net/utqafz61/

...因此，如果行高与字体大小(1em)相同，则链接将重叠，从而难以单击正确的链接.我首先在以下网站上注意到了这一点:在导航菜单上， https://www.hassellstudio.com 链接重叠.鼠标指针可以位于一个链接上，但下面的链接被突出显示！

... so if the line-height is the same as the font-size (1em) then the links will overlap making it difficult to click the right link. I first noticed this on this website: https://www.hassellstudio.com on the nav menu the links overlap. The mouse pointer can be on one link, but the link below is highlighted!

推荐答案

问题出在导航栏中的 line-height ，它的行()line-height之间没有空格:1em仅分配与font-size(50px)相同的字体，因此字母周围的默认空间没有空间).您可以将 line-height 增大(1.1em将与上面的代码一起使用):

The problem is with the line-height in your nav, its not giving any space between the lines ()line-height: 1em is only allocating the same as the font-size (50px) so there is no room for the default space around the letters). You can make line-height larger (1.1em will works with your code above):

nav { line-height: 1.1em; } 

或者将其完全删除，以便使用默认设置.

Or just remove it altogether so it uses the default.

更新:

如果您不能从1em更改行高，则有两个基本问题会导致实现此问题:

If you cannot change the line-height from 1em, There are 2 fundamental problems that are causing issues to achieve this:

1. a 标记默认为内联，这使得使用边距&填充等
2. 大多数字体在上下都有多余的空间，因此上升和下降不会碰到- 这取决于字体字形本身 .一些字体是更差"的.比其他人.

1. a tags are inline by default which makes it harder to work with margins & padding etc.
2. most fonts have extra space above and below so that the ascenders and descenders don't touch - this is down to the font glyphs themselves. Some fonts are "worse" than others.

您可以使用以下命令强制链接不在 li 之外溢出，并且这样可以防止您看到鼠标看起来像在一个链接上但实际上会激活另一个链接的效果.

You could force the link not to overflow outside the li using the following, and it will prevent the effect you see where the mouse looks like its over one link but actually activates another:

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

但是，根据字体的不同，这可能会在字母的下沿上裁掉一小部分.

However depending on the font, this could crop a tiny part off the descenders of the letters.

有效代码段:

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>

要解决此问题，没有一种简单的方法就是不改变行高(甚至略微改变)，但是我尝试了各种技巧，以查看是否可以在不移动活动链接的情况下将链接文本向上移动几个像素.

There isn't an easy way around this without changing the line-height (even slightly), but I tried various hacks to see if we could move the link text up a couple of pixels without moving the active link.

如果您有可能使 a 成为 display:block ，那么这似乎可行:

If it is possible for you to make the a to be display: block, then this seems to work:

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

解决方案:使用溢出:隐藏的负边距和填充作为解决方法

负边距在链接的顶部(具有额外的空间)向上移动，而填充则为下降部分增加了一点空间. li 上的òverflow:hidden 裁剪掉了多余的部分.

The negative margin moves up the top of the link (which has the extra space) and the padding adds a little space for the descender. The òverflow:hidden on the li crops off the extra.

您可以在下面看到它的工作-注意，我已经 极大地夸大了 边距和填充以确保其不重叠，并且在链接周围添加了边框明确链接的位置:

You can see it working below - Note I have greatly exaggerated the margin and padding to ensure that it works with no overlap, and I added a border around the links to make it clear where the link was:

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>

那是我能想到的，希望其中一种是合适的！

That's as good as I can come up with, hope one of those options is suitable!

这篇关于列表项内的链接的高度大于list元素的高度-这是怎么回事?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！