Los enlaces dentro de los elementos de la lista tienen una altura mayor que el elemento de la lista. ¿Qué sucede?
Tengo un navque contiene una lista de enlaces. La lista tiene un line-height: 1em. Sin embargo, los enlaces tienen una altura mayor 1emy se superponen al elemento de la lista anterior, lo que dificulta hacer clic en los elementos.
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>
Esto se puede ver más fácilmente si agrego margin-bottomal archivo nav li. Los enlaces (rosa) tienen una altura mayor que la altura de línea de los elementos de la lista (verde):
¿Cómo hago para que los enlaces tengan la misma altura que los elementos de la lista? ¿Para que no haya superposición?
Nota. no hay relleno en los enlaces, así que no sé por qué son más grandes. No hace ninguna diferencia si agrego height:1ema nav a. Probé display:inline-block, que hace que el fondo rosa tenga la misma altura que el fondo verde, pero, curiosamente, todavía se puede hacer clic en los enlaces justo encima y debajo del fondo rosa. El área en la que se puede hacer clic no se limita al fondo rosa.
NUEVA INFORMACIÓN
Los enlaces tienen una altura mayor que los font-size.
El tamaño del enlace no está influenciado de ninguna manera por el line-height.
Por ejemplo, una línea de texto font-size: 50pxtiene una altura de 50 px. Sin embargo, el enlace dentro de la línea de texto tiene una altura de 68 px (no hay relleno ni margen en el enlace).
Supongo que el área en la que se puede hacer clic alrededor del enlace debe tener en cuenta todos los ascendentes y descendentes del tipo de letra. Y es por eso que tiene una altura mayor que el tamaño de fuente.
Por lo tanto, si la altura de la línea se establece en 1 em, los enlaces se superponen. El uso display: inline-blockmuestra el fondo rosa con la misma altura que el fondo verde, pero (extrañamente) el área en la que se puede hacer clic sigue siendo más grande que la altura del fondo rosa de 50 px.
A menos que haya una forma de restringir la altura del enlace a la altura del tamaño de la fuente, tendré que aumentar la altura de la línea para tener en cuenta esta diferencia.
Este JS Fiddle muestra cómo los enlaces son más grandes que el tamaño de fuente:https://jsfiddle.net/utqafz61/
... así que si la altura de la línea es la misma que el tamaño de la fuente (1em), los enlaces se superpondrán, lo que dificultará hacer clic en el enlace correcto. Lo noté por primera vez en este sitio web:https://www.hassellstudio.comen el menú de navegación, los enlaces se superponen. El puntero del mouse puede estar en un enlace, ¡pero el enlace a continuación está resaltado!
Respuestas
lo extraño que estabas haciendo es establecer el que es el padre del font-sizeque los había hecho más grandes y también es diferente del real solo mira aquínavul li10remline-heightheightline-height
ejemplo
* {
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>Simplemente agregue display: inline-blocka sus aelementos.
Las etiquetas de anclaje están insertadas de forma natural en las hojas de estilo del agente de usuario, lo que está causando el desbordamiento.
El problema está line-heighten su navegador, no da ningún espacio entre las líneas ()line-height: 1em solo está asignando el mismo tamaño de fuente (50px) por lo que no hay espacio para el espacio predeterminado alrededor de las letras) . Puede hacer line-heightmás grande (1.1em funcionará con su código anterior):
nav { line-height: 1.1em; }
O simplemente elimínelo por completo para que use el valor predeterminado.
ACTUALIZAR:
Si no puede cambiar la altura de línea de 1 em, hay 2 problemas fundamentales que están causando problemas para lograr esto:
alas etiquetas están en línea de forma predeterminada, lo que dificulta el trabajo con márgenes y relleno, etc.- la mayoría de las fuentes tienen espacio adicional arriba y abajo para que los ascendentes y descendentes no se toquen; esto se debe a los glifos de la fuente . Algunas fuentes son "peores" que otras.
Puede forzar el enlace para que no se desborde fuera del liuso de lo siguiente, y evitará el efecto que ve donde el mouse parece estar sobre un enlace pero en realidad activa otro:
nav li {
background-color: green;
overflow: hidden; /* this will crop off anything outside the element */
}
Sin embargo, dependiendo de la fuente, esto podría recortar una pequeña parte de los descendientes de las letras.
Fragmento de trabajo:
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>No hay una manera fácil de evitar esto sin cambiar la altura de la línea (aunque sea un poco), pero probé varios trucos para ver si podíamos mover el texto del enlace un par de píxeles hacia arriba sin mover el enlace activo.
Si es posible que hagas el ato be display: block, entonces esto parece funcionar:
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;
}
Solución: Utilice overflow:hidden, margen negativo y relleno como solución alternativa.
El margen negativo se mueve hacia arriba en la parte superior del enlace (que tiene el espacio adicional) y el relleno agrega un pequeño espacio para el descenso. El òverflow:hiddenen los licultivos fuera del extra.
Puede verlo funcionar a continuación: tenga en cuenta que exageré mucho el margen y el relleno para garantizar que funcione sin superposición, y agregué un borde alrededor de los enlaces para que quede claro dónde estaba el enlace:
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>Eso es lo mejor que se me ocurre, ¡espero que una de esas opciones sea adecuada!