Come faccio a rendere l'intera area di una voce di elenco nella mia barra di navigazione, selezionabile come collegamento?

Question

Ho una barra di navigazione orizzontale creata da una lista non ordinata, e ogni elemento della lista ha un sacco di padding per renderlo bello, ma l'unica area che funziona come un collegamento è il testo stesso. Come posso consentire all'utente di fare clic in qualsiasi punto della voce di elenco per attivare il collegamento?

#nav { 
 
    background-color: #181818; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
} 
 

 
#nav img { 
 
    float: left; 
 
    padding: 5px 10px; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
    vertical-align: bottom; 
 
} 
 

 
#nav ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    background-color: #181818; 
 
    float: left; 
 
} 
 

 
#nav li { 
 
    display: block; 
 
    float: left; 
 
    padding: 25px 10px; 
 
} 
 

 
#nav li:hover { 
 
    background-color: #785442; 
 
} 
 

 
#nav a { 
 
    color: white; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    text-decoration: none; 
 
}

<div id="nav"> 
 
    <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" /> 
 
    <ul> 
 
    <li><a href="#">One1</a></li> 
 
    <li><a href="#">Two</a></li> 
 
    <li><a href="#">Three</a></li> 
 
    <li><a href="#">Four</a></li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    <h2>Heading</h2> 
 
</div>

Answer 1

Non mettere imbottitura nella voce 'li'. Piuttosto, imposta il tag di ancoraggio su display:inline-block; e applica il riempimento a esso.

Answer 2

Fare in modo che il tag di ancoraggio contenga il padding anziché lo li. In questo modo, occuperà tutta l'area.

Answer 3

definire la vostra proprietà css come tag di ancoraggio:

{display:block} 

Poi l'ancora occuperà l'intera area lista, in modo che il click lavorerà nello spazio vuoto accanto alla vostra lista.

Answer 4

Inserire l'elemento di elenco all'interno del collegamento ipertestuale anziché viceversa.

Per esempio con il codice:

<a href="#"><li>One</li></a> 

Answer 5

Oppure si potrebbe usare jQuery:

$("li").click(function(){ 
    window.location=$(this).find("a").attr("href"); 
    return false; 
}); 

Answer 6

Super, super tardi per questo partito, ma in ogni caso: è possibile anche lo stile l'ancora come un flex articolo. Ciò è particolarmente utile per voci di elenco di dimensioni dinamiche/organizzate.

a { 
    /* This flexbox code stretches the link's clickable 
    * area to fit its parent block. */ 
    display:  flex; 
    flex-grow:  1; 
    flex-shrink: 1; 
    justify-content: center; 
} 

(avvertimento:. Flexboxes sono obvs ancora non ben supportato Autoprefixer per il salvataggio!)

Answer 7

Uso seguente:

a { 
    display: list-item; 
    list-style-type: none; 
} 

Answer 8

si dovrebbe usare questa proprietà CSS e il valore nella vostra li:

pointer-events:all; 

Quindi, è possibile gestire il collegamento con jQuery o JavaScript o noi una e un tag a, ma tutti gli altri elementi di tag all'interno del li dovrebbero avere la proprietà CSS:

pointer-events:none;