Faire ensemble <li> lien avec HTML propre

Je sais que cela a été beaucoup de fois avant, mais je ne pouvais pas trouver toute solution dans mon cas précis.

J'ai une barre de navigation et je veux tout <li>s'être "lié" ou "cliquables" si vous voulez. Maintenant, seul le <a> (et le <div>'s que j'ai bricolé avec) est "cliquable".

J'ai essayé de la li a {display: inner-block; height: 100%; width: 100%} méthode, mais les résultats sont tout simplement horrible.

La source peut être trouvé ici: http://jsfiddle.net/prplxr/BrcZK/

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>asdf</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="menu">
                <div id="innermenu">    
                    <ul id="menulist">       
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk2</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk3</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk4</div></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Faire quelqu'un a une solution élégante à ce point?

Vous en remercie d'avance!

Si vous voulez <li> a cliquable alors vous avez besoin pour l'utilisation de Javascript, c'est que l'amende?

OriginalL'auteur Christian Lundahl | 2012-12-06

  1. 41
    • Se débarrasser de la <div>s.
    • Définir la <a> balises d'avoir display: block
    • Déplacer le rembourrage de la <li> à la <a>.
    • La <li>s devra être flotté ou display: inline-block

    Exemple: http://jsfiddle.net/8yQ57/

    Parfait! C'est exactement ce que je cherchais! Merci beaucoup, Steve!
    M'a sauvé des heures à essayer d'obtenir un lien à appliquer à un ensemble de diapositives sur un site Sharepoint. Juste eu à ajouter de la hauteur:100%.

    OriginalL'auteur Steve Pugh

  2. 6

    Suffit d'utiliser "afficher le bloc" pour le lien. 

    ul {
  display: block;
  list-style-type: none;
}

li {
  display: inline-block; /* or block with float left */
  /* margin HERE! */
}

li a {
  display: block;
  /* padding and border HERE! */
}

    Voici l'exemple http://jsfiddle.net/TWFwA/ 🙂

    Cela ne résoudra pas le problème dans son ensemble. Si le remplissage est appliqué à la li (qui il est), alors il y aura encore unclickable de l'espace autour de la a (qui va occuper tout l'espace horizontal jusqu'à le rembourrage.
    Bien sûr, le rembourrage doit être à l'intérieur le lien 🙂 c'est à l'intérieur de lien dans mon jsfiddle de l'échantillon. Je pense que c'est évident.
    Bon modifications! 🙂

    OriginalL'auteur starikovs

  3. 4

    J'ai moi-même eu ce problème.

    La réponse ne pouvait pas être plus simple:

    <li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
Wrong:
.menuitem {
    list-style-type:        none;
    display:                 inline;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

Correct
.menuitem a {
    list-style-type:        none;
    display:                 block;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

    en d'autres termes, vous voulez appliquer le css, que le LI eu de la Un élément. S'assurer que l'Un est un bloc de la ligne de l'élément

    +1 pour notamment l'exemple de code dans votre réponse, et à l'aide de CSS fournis par les OP.

    OriginalL'auteur Jamie Hutber

  4. 1

    Je pense que vous avez peut-être voulu dire inline-block, pas inner-block:

    li a {display: inline-block; height: 100%; width: 100%; }

    Aussi, inline-block a son propre ensemble de problèmes avec les anciens navigateurs IE, et ne sera probablement pas réagir comment vous vous attendez.

    Oui, je l'ai fait. J'ai peut-être trop peu de sommeil aujourd'hui. 🙂

    OriginalL'auteur Sean

  5. 0

    sir vous utilisez jquery ?
    si oui, vous pouvez l'essayer :

    $("li").click(function(){
   $(this).find('a').click();
});

    ou vous pouvez l'utiliser aussi comme css:

    li{
  position:relative;
}
li a {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

    Choisir un ...
    Bonne chance

    Pas très bonnes solutions à ce problème. jQuery est exagéré (surtout quand il n'y a pas même une mention de JavaScript). Et position: absolute sera la cause de la li à perdre de la hauteur et de la largeur.

    OriginalL'auteur Michael Antonius

  6. 0

    Juste formater le a directement au lieu de la li avec vos styles.

    J'ai alterd votre violon http://jsfiddle.net/BrcZK/1/

    OriginalL'auteur Jona

  7. 0

    Voici ce que je fais:

    a { display: block; }

    Puis le style des ancres comme je l'entends.

    Voici le violon: http://jsfiddle.net/erik_lopez/v4P5h/

    OriginalL'auteur Erik

  8. 0

    Vous devez en faire la a éléments display:block ou display:inline-block.

    Mitchell est vrai, pourquoi il a obtenu le vote à la baisse ?
    Parce que apparaissant cliquable n'est pas la même chose que réellement cliquable. Et c'est encore pire UX.
    vous avez raison, c'est une mauvaise conception.

    OriginalL'auteur Mitchell

  9. -2

    Déplacer le <a> balises afin qu'ils ajoutent la <li> balises. Selon cette réponse, balises d'ancrage doit contenir les éléments en ligne, et il semble que votre <li>s'sont en ligne, donc cela devrait être valable.

    Malheureusement, il n'est pas valide pour un <li> sous tout sauf un <ul>. Pas de ul a li {} permis.
    Le inline ou block de la nature de l'élément est défini dans la spécification HTML et n'est pas modifié par la propriété CSS display. display: inline juste fait quelque chose de regarder en ligne, il n'est pas réellement le faire en ligne.
    En fait, c'est plus qu'un <ul> ne peut pas contenir n'importe quoi, sauf <li>'.

    OriginalL'auteur Scott S