Comment créer une <a>étiquette de la taille de son parent</a><li> <a>tag pour une plus grande région cliquable ?</a>

Question

Je voudrais faire cela pour que la région cliquable sur la balise soit de la taille du LI .

Mon html ressemble à :

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

Answer 1

Comme d'autres l'ont dit

 li a { display: block; }

devrait atteindre ce que vous recherchez. Mais vous devez également supprimer tout rembourrage du <li> et le définir sur le <a> à la place. Par exemple:

 li { padding: 0; }
  li a { display: block; padding: 1em; }

Answer 2

En CSS :

 li a {
     display: block;
}

Bien sûr, vous voudrez rendre votre sélecteur plus spécifique que cela.

 <ul>
    <li class="myClass">
        <a href="#">Link</a>
    </li>
</ul>

li.myClass a {
    display: block;
    background-color: #fdd; /* Demo only */
}

http://jsfiddle.net/userdude/jmj2k/

Answer 3

Cela rendra toute la zone cliquable.

 li a { display: block; }

Answer 4

li a{     
display: inline-table;
height:95%;    
width: 95%;
}

le 95 pour anticiper toute marge li ou padding

Answer 5

Essayez ce css

 li{
    border:1px solid black;
    height:40px;
}

li a{
    border:1px solid red;
    display:block;
    height:100%;
}