I collegamenti all'interno degli elementi dell'elenco hanno un'altezza maggiore dell'elemento dell'elenco: cosa sta succedendo?
Ho un nav
contenente un elenco di collegamenti. L'elenco ha un'estensione line-height: 1em
. Tuttavia, i collegamenti hanno un'altezza maggiore 1em
e si sovrappongono all'elemento dell'elenco precedente, rendendo difficile fare clic sugli elementi.
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>

Questo può essere visto più facilmente se aggiungo margin-bottom
a nav li
. I collegamenti (rosa) hanno un'altezza maggiore rispetto all'altezza della riga degli elementi dell'elenco (verde):

Come faccio a fare in modo che i link abbiano la stessa altezza degli elementi dell'elenco? In modo che non ci siano sovrapposizioni?
Nota. non c'è riempimento sui collegamenti, quindi non so perché sono più grandi. Non fa alcuna differenza se aggiungo height:1em
a nav a
. Ho provato display: inline-block - che rende lo sfondo rosa della stessa altezza dello sfondo verde, ma stranamente i link sono ancora cliccabili appena sopra e sotto lo sfondo rosa! L'area selezionabile non è limitata allo sfondo rosa.
NUOVE INFO
I collegamenti hanno un'altezza maggiore del font-size
.
La dimensione del collegamento non è in alcun modo influenzata dal file line-height
.
Ad esempio una riga di testo con font-size: 50px
ha un'altezza di 50 px. Tuttavia, il collegamento all'interno della riga di testo ha un'altezza di 68 px (non c'è riempimento o margine sul collegamento).
Presumo che l'area cliccabile intorno al collegamento debba tenere conto di tutti i ascendenti e discendenti del carattere tipografico. Ed è per questo che ha un'altezza maggiore della dimensione del carattere.
Quindi se l'altezza della linea è impostata su 1em i collegamenti si sovrappongono. L'uso display: inline-block
mostra lo sfondo rosa alla stessa altezza dello sfondo verde, ma (stranamente) l'area selezionabile è ancora più grande dell'altezza dello sfondo rosa di 50px.
A meno che non ci sia un modo per vincolare l'altezza del collegamento all'altezza della dimensione del carattere, dovrò aumentare l'altezza della riga per tenere conto di questa differenza.
Questo JS Fiddle mostra come i collegamenti siano più grandi della dimensione del carattere: https://jsfiddle.net/utqafz61/
... quindi se l'altezza della riga è uguale alla dimensione del carattere (1em), i collegamenti si sovrapporranno rendendo difficile fare clic sul collegamento destro. L'ho notato per la prima volta su questo sito:https://www.hassellstudio.comnel menu di navigazione i collegamenti si sovrappongono. Il puntatore del mouse può essere su un collegamento, ma il collegamento sotto è evidenziato!
Risposte
la cosa strana che stavi facendoèimpostare il font-size
di nav
cui è genitore su ul li
quello 10rem
che li aveva resi più grandi ed line-height
è anche diverso dall'attuale height
vedi quiline-height
esempio
* {
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>
Basta aggiungere display: inline-block
ai tuoi a
elementi.
I tag di ancoraggio sono naturalmente integrati dai fogli di stile dell'agente utente, che è ciò che causa il tuo overflow.
Il problema è con il line-height
tuo nav, non dà spazio tra le linee () line-height: 1em assegna solo la stessa dimensione del carattere (50px) quindi non c'è spazio per lo spazio predefinito intorno alle lettere) . Puoi line-height
ingrandirlo (1.1em funzionerà con il tuo codice sopra):
nav { line-height: 1.1em; }
Oppure rimuovilo del tutto in modo che utilizzi l'impostazione predefinita.
AGGIORNARE:
Se non è possibile modificare l'altezza della linea da 1em, ci sono 2 problemi fondamentali che causano problemi per raggiungere questo obiettivo:
a
i tag sono in linea per impostazione predefinita, il che rende più difficile lavorare con margini e spaziatura interna, ecc.- la maggior parte dei caratteri ha uno spazio extra sopra e sotto in modo che le ascendenti e le discendenti non si tocchino - questo dipende dai glifi dei caratteri stessi . Alcuni caratteri sono "peggiori" di altri.
Puoi forzare il collegamento a non traboccare al di fuori di quanto li
segue, e impedirà l'effetto che vedi dove il mouse sembra essere sopra un collegamento ma in realtà ne attiva un altro:
nav li {
background-color: green;
overflow: hidden; /* this will crop off anything outside the element */
}
Tuttavia, a seconda del carattere, questo potrebbe ritagliare una piccola parte dai discendenti delle lettere.
Snippet di lavoro:
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>
Non c'è un modo semplice per aggirare questo problema senza modificare l'altezza della linea (anche leggermente), ma ho provato vari hack per vedere se potevamo spostare il testo del collegamento di un paio di pixel senza spostare il collegamento attivo.
Se è possibile per te creare l' a
essere display: block
, allora questo sembra funzionare:
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;
}
Soluzione: utilizzare overflow: nascosto, margine negativo e riempimento come soluzione alternativa
Il margine negativo si sposta nella parte superiore del collegamento (che ha lo spazio extra) e l'imbottitura aggiunge un po 'di spazio per il discensore. Il òverflow:hidden
sui li
ritaglia gli extra.
Puoi vederlo funzionare di seguito - Nota che ho notevolmente esagerato il margine e il riempimento per assicurarmi che funzioni senza sovrapposizioni e ho aggiunto un bordo attorno ai collegamenti per chiarire dove si trovava il collegamento:
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>
È quanto di meglio possa venire in mente, spero che una di quelle opzioni sia adatta!