Ссылки внутри элементов списка имеют высоту больше, чем элемент списка - что происходит?
У меня есть 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в навигационном меню ссылки перекрываются. Указатель мыши может быть на одной ссылке, но ссылка ниже будет выделена!
Ответы
странно , что вы делали, чтобы установить 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>
Просто добавьте display: inline-block
к своим a
элементам.
Теги привязки естественным образом встраиваются в таблицы стилей пользовательского агента, что и является причиной вашего переполнения.
Проблема в том, что line-height
в вашем навигаторе нет места между строками () line-height: 1em выделяет только то же, что и font-size (50 пикселей), поэтому нет места для пространства по умолчанию вокруг букв) . Вы можете line-height
увеличить (1.1em будет работать с указанным выше кодом):
nav { line-height: 1.1em; }
Или просто удалите его полностью, чтобы использовать значение по умолчанию.
ОБНОВИТЬ:
Если вы не можете изменить высоту строки с 1em, есть две фундаментальные проблемы, которые вызывают проблемы для достижения этого:
a
Теги по умолчанию встроены, что затрудняет работу с полями, заполнением и т. д.- у большинства шрифтов есть дополнительное пространство сверху и снизу, так что верхние и нижние элементы не соприкасаются - это зависит от самих глифов шрифта . Некоторые шрифты «хуже» других.
Вы можете заставить ссылку не переполняться за пределами 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>
Это все, что я могу придумать, надеюсь, один из этих вариантов подходит!