Comment activer le lien HTML en cliquant sur le <li> ?

Question

J'ai la balise suivante,

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

En <li> est un peu grand, avec une petite image à sa gauche, Je dois cliquer sur l'image <a> pour activer le lien. Comment puis-je faire un clic sur le <li> activer le lien ?

Éditer1 :

ul#menu li
{
    display:block;
    list-style: none;
    background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

ul#menu li a
{

    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

Answer 1

#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

Il faudra peut-être l'adapter à IE6, mais c'est à peu près comme cela qu'il faut faire.

Answer 2

Comme l'a dit Marineio, vous pouvez utiliser la fonction onclick de l'attribut <li> pour modifier location.href par le biais de javascript :

<li onclick="location.href='http://example';"> ... </li>

Il est également possible de supprimer les marges ou le rembourrage dans le fichier <li> et ajoutez un large rembourrage sur le côté gauche de l'écran d'affichage. <a> pour éviter que le texte ne dépasse la puce.

Answer 3

Il s'agit simplement d'une option :

<ul id="menu">
    <a href="#"><li>Something1</li></a>
    <a href="#"><li>Something2</li></a>
    <a href="#"><li>Something3</li></a>
    <a href="#"><li>Something4</li></a>
</ul>

C'est le style que j'utilise dans mes menus, il fait de l'élément de la liste lui-même un lien hypertexte (de la même manière qu'une image est un lien).
Pour le coiffage, j'applique généralement quelque chose comme ceci :

nav ul a {
    color: inherit;
    text-decoration: none;
}

Je peux ensuite appliquer le style que je souhaite au <li>.

Remarque : Les validateurs se plaindront de cette méthode, mais si vous êtes comme moi et que votre vie n'est pas basée sur eux, cela devrait fonctionner parfaitement.

Answer 4

Il suffit d'insérer le texte du lien dans une balise 'p' ou quelque chose de similaire et d'ajouter une marge et un espacement à cet élément, de cette façon cela n'affectera pas les paramètres que MiffTheFox t'a donné, c'est à dire

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

Answer 5

Cela rendra l'ensemble des <li> en tant que lien :

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>