I collegamenti all'interno degli elementi dell'elenco hanno un'altezza maggiore dell'elemento dell'elenco: cosa sta succedendo?

Aug 19 2020

Ho un navcontenente un elenco di collegamenti. L'elenco ha un'estensione line-height: 1em. Tuttavia, i collegamenti hanno un'altezza maggiore 1eme 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-bottoma 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:1ema 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: 50pxha 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-blockmostra 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

UmutambyiGad Aug 19 2020 at 19:53

la cosa strana che stavi facendoèimpostare il font-sizedi navcui è genitore su ul liquello 10remche li aveva resi più grandi ed line-heightè anche diverso dall'attuale heightvedi 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>

JHeth Aug 19 2020 at 19:57

Basta aggiungere display: inline-blockai tuoi aelementi.

I tag di ancoraggio sono naturalmente integrati dai fogli di stile dell'agente utente, che è ciò che causa il tuo overflow.

FluffyKitten Aug 19 2020 at 19:54

Il problema è con il line-heighttuo 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-heightingrandirlo (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:

  1. a i tag sono in linea per impostazione predefinita, il che rende più difficile lavorare con margini e spaziatura interna, ecc.
  2. 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 lisegue, 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' aessere 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:hiddensui liritaglia 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!