Les liens à l'intérieur des éléments de liste ont une hauteur supérieure à l'élément de liste - que se passe-t-il?
J'ai un navcontenant une liste de liens. La liste a un line-height: 1em. Cependant, les liens ont une hauteur supérieure à 1emet chevauchent l'élément de liste précédent, ce qui rend difficile le clic sur les éléments.
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>
Cela peut être vu plus facilement si j'ajoute margin-bottomau nav li. Les liens (rose) ont une hauteur supérieure à la hauteur de ligne des éléments de la liste (vert):
Comment faire pour que les liens aient la même hauteur que les éléments de la liste? Pour qu'il n'y ait pas de chevauchement?
Remarque. il n'y a pas de rembourrage sur les liens, donc je ne sais pas pourquoi ils sont plus gros. Cela ne fait aucune différence si j'ajoute height:1emau nav a. J'ai essayé display: inline-block - qui rend le fond rose à la même hauteur que le fond vert, mais étrangement les liens sont toujours cliquables juste au-dessus et en dessous du fond rose! La zone cliquable n'est pas limitée au fond rose.
NOUVELLES INFO
Les liens ont une hauteur supérieure à celle du font-size.
La taille du lien n'est en aucun cas influencée par le line-height.
Par exemple, une ligne de texte avec font-size: 50pxa une hauteur de 50 px. Pourtant, le lien à l'intérieur de la ligne de texte a une hauteur de 68px (il n'y a pas de remplissage ou de marge sur le lien).
Je suppose que la zone cliquable autour du lien doit prendre en compte tous les ascendeurs et descendants de la police. Et c'est pourquoi il a une hauteur supérieure à la taille de la police.
Par conséquent, si la hauteur de ligne est définie sur 1em, les liens se chevauchent. L'utilisation display: inline-blockaffiche le fond rose comme étant de la même hauteur que le fond vert, mais, (étrangement) la zone cliquable est toujours plus grande que la hauteur du fond rose de 50 px.
À moins qu'il n'y ait un moyen de contraindre la hauteur du lien à la hauteur de la taille de la police, alors je devrai augmenter la hauteur de la ligne pour tenir compte de cette différence.
Ce JS Fiddle montre comment les liens sont plus grands que la taille de la police: https://jsfiddle.net/utqafz61/
... donc si la hauteur de la ligne est la même que la taille de la police (1em), les liens se chevaucheront, ce qui rendra difficile le clic sur le bon lien. J'ai remarqué ceci pour la première fois sur ce site Web:https://www.hassellstudio.comdans le menu de navigation, les liens se chevauchent. Le pointeur de la souris peut être sur un lien, mais le lien ci-dessous est mis en évidence!
Réponses
la chose étrange que vous faites est de mettre la font-sizede ce navqui est parent de ul lià 10remqui les avaient fait plus gros et aussi line-heightest différente de la réelle heightSé juste iciline-height
exemple
* {
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>Ajoutez simplement display: inline-blockà vos aéléments.
Les balises d'ancrage sont naturellement intégrées dans les feuilles de style de l'agent utilisateur, ce qui cause votre débordement.
Le problème est avec le line-heightdans votre nav, il ne donne aucun espace entre les lignes () line-height: 1em alloue uniquement la même chose que la taille de la police (50px) donc il n'y a pas de place pour l'espace par défaut autour des lettres) . Vous pouvez line-heightagrandir (1.1em fonctionnera avec votre code ci-dessus):
nav { line-height: 1.1em; }
Ou supprimez-le simplement pour qu'il utilise la valeur par défaut.
METTRE À JOUR:
Si vous ne pouvez pas changer la hauteur de ligne de 1em, il y a 2 problèmes fondamentaux qui causent des problèmes pour y parvenir:
ales balises sont en ligne par défaut, ce qui rend plus difficile le travail avec les marges et le remplissage, etc.- la plupart des polices ont un espace supplémentaire au-dessus et au-dessous afin que les ascendeurs et les descendants ne se touchent pas - cela dépend des glyphes de police eux-mêmes . Certaines polices sont «pires» que d'autres.
Vous pouvez forcer le lien à ne pas déborder en dehors de l' liutilisation de ce qui suit, et cela empêchera l'effet que vous voyez où la souris ressemble à son sur un lien mais en active un autre:
nav li {
background-color: green;
overflow: hidden; /* this will crop off anything outside the element */
}
Cependant, en fonction de la police, cela pourrait rogner une infime partie des descendants des lettres.
Extrait de travail:
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>Il n'y a pas de moyen facile de contourner cela sans changer la hauteur de la ligne (même légèrement), mais j'ai essayé divers hacks pour voir si nous pouvions déplacer le texte du lien vers le haut de quelques pixels sans déplacer le lien actif.
S'il vous est possible de créer le adevenir display: block, cela semble fonctionner:
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;
}
Solution: utilisez le débordement: marge et remplissage cachés, négatifs comme solution de contournement
La marge négative se déplace vers le haut du lien (qui a l'espace supplémentaire) et le rembourrage ajoute un peu d'espace pour le descendeur. Le òverflow:hiddensur les lirécoltes sur le supplément.
Vous pouvez le voir fonctionner ci-dessous - Notez que j'ai grandement exagéré la marge et le remplissage pour m'assurer que cela fonctionne sans chevauchement, et j'ai ajouté une bordure autour des liens pour indiquer clairement où se trouvait le lien:
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>C'est aussi bien que je peux trouver, j'espère qu'une de ces options convient!