Ссылки внутри элементов списка имеют высоту больше, чем элемент списка - что происходит?

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высотой 50 пикселей. Тем не менее, ссылка внутри строки текста имеет высоту 68 пикселей (на ссылке нет отступов или полей).

Я предполагаю, что интерактивная область вокруг ссылки должна учитывать все восходящие и нисходящие элементы гарнитуры. И поэтому высота у него больше, чем у font-size.

Следовательно, если высота строки установлена ​​на 1em, ссылки перекрываются. Использование display: inline-blockотображает розовый фон такой же высоты, что и зеленый фон, но (как ни странно) кликабельная область по-прежнему больше, чем высота розового фона 50 пикселей.

Если нет способа ограничить высоту ссылки высотой font-size, мне придется увеличить высоту строки, чтобы учесть эту разницу.

Этот JS Fiddle показывает, насколько ссылки больше размера шрифта: https://jsfiddle.net/utqafz61/

... поэтому, если высота строки такая же, как и размер шрифта (1em), тогда ссылки будут перекрываться, что затрудняет щелчок по правой ссылке. Впервые я заметил это на этом сайте:https://www.hassellstudio.comв навигационном меню ссылки перекрываются. Указатель мыши может быть на одной ссылке, но ссылка ниже будет выделена!

Ответы

UmutambyiGad Aug 19 2020 at 19:53

странно , что вы делали, чтобы установить font-sizeиз navкоторых является родителем , ul liчтобы 10remчто сделало их больше , а также line-heightотличается от фактического heightпросто з здесьline-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 (50 пикселей), поэтому нет места для пространства по умолчанию вокруг букв) . Вы можете line-heightувеличить (1.1em будет работать с указанным выше кодом):

nav { line-height: 1.1em; } 

Или просто удалите его полностью, чтобы использовать значение по умолчанию.

ОБНОВИТЬ:

Если вы не можете изменить высоту строки с 1em, есть две фундаментальные проблемы, которые вызывают проблемы для достижения этого:

  1. a Теги по умолчанию встроены, что затрудняет работу с полями, заполнением и т. д.
  2. у большинства шрифтов есть дополнительное пространство сверху и снизу, так что верхние и нижние элементы не соприкасаются - это зависит от самих глифов шрифта . Некоторые шрифты «хуже» других.

Вы можете заставить ссылку не переполняться за пределами liиспользования следующего, и это предотвратит эффект, который вы видите, когда мышь выглядит так, как будто она находится над одной ссылкой, но фактически активирует другую:

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, отрицательные поля и отступы в качестве обходного пути.

Отрицательное поле перемещается вверх по ссылке (в которой есть дополнительное пространство), а заполнение добавляет немного места для нижнего элемента. ò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>

Это все, что я могу придумать, надеюсь, один из этих вариантов подходит!