web-dev-qa-db-fra.com

Faites tout <li> un lien avec le code HTML approprié

Je sais que cela a été soulevé de nombreuses fois auparavant, mais je ne trouvais aucune solution dans mon cas particulier.

J'ai une barre de navigation et je veux que le <li> entier soit "lié" ou "cliquable" si vous voulez. Désormais, seul le <a> (et le <div> que j'ai tripoté) est "cliquable".

J'ai essayé la méthode li a {display: inner-block; height: 100%; width: 100%} mais les résultats ont été horribles.

La source peut être trouvée 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>

Quelqu'un at-il une solution soignée à cela?

Merci d'avance!

htmlcssnavigationhtml-lists
15
Christian Lundahl
  • Débarrassez-vous du <div>s. 
  • Définissez les balises <a> sur display: block
  • Déplacez le remplissage du <li> au <a>. 
  • Le <li>s devra être flottant ou display: inline-block

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

44
Steve Pugh

Il suffit d'utiliser "bloc d'affichage" 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/ :)

6
starikovs

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

La réponse ne pourrait ê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 les LI avaient à l'élément A. S'assurer que le A est un élément de ligne de bloc

4
Jamie Hutber

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

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

De plus, inline-block a son propre ensemble de problèmes avec les anciens navigateurs IE et ne réagira probablement pas comme vous le souhaiteriez.

1
Sean

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

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

ou vous pouvez aussi l'utiliser comme css:

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

Choisissez-en un .... Bonne chance

0
Michael Antonius

Formatez simplement la a directement au lieu de la li avec vos styles.

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

0
Jona

Vous devez créer les a éléments display:block ou display:inline-block.

0
Mitchell

Voici ce que je fais:

a { display: block; }

Puis coiffez les ancres comme bon me semble.

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

0
Erik