web-dev-qa-db-fra.com

Étirement <a> balise pour remplir tout <li>

Voici une structure de menu simple:

<ul id="menu">
  <li><a href="javascript:;">Home</a></li>
  <li><a href="javascript:;">Test</a></li>
</ul>

Je veux que le <a> soit étiré de manière à remplir tout le <li>. J'ai essayé d'utiliser quelque chose comme width: 100%; height: 100% mais cela n'a eu aucun effet. Comment étirer correctement la balise d'ancrage?

htmlcssxhtml
56
Pieter

La balise "a" est un élément de niveau en ligne. Aucun élément de niveau en ligne ne peut avoir sa largeur définie. Pourquoi? Parce que les éléments de niveau en ligne sont censés représenter un texte fluide qui pourrait théoriquement se terminer d'une ligne à l'autre. Dans ce genre de cas, il n’a pas de sens de fournir la largeur de l’élément, car on ne sait pas nécessairement s’il est emballé ou non. Afin de définir sa largeur, vous devez modifier sa propriété display en block ou inline-block:

a.wide {
    display:block;
}

...

<ul id="menu">
  <li><a class="wide" href="javascript:;">Home</a></li>
  <li><a class="wide" href="javascript:;">Test</a></li>
</ul>

Si la mémoire est utilisée, vous pouvez définir la largeur de certains éléments de niveau en ligne dans IE6. Mais c’est parce que IE6 n’implémente pas correctement les CSS et veut vous confondre.

111
Dave Markle

Dénommez simplement le A avec un display:block;:

ul#menu li a { display: block;}
13
bluesmoon
display:flex

est la manière HTML5. 

Voir Fiddle

Utile pour pirater des boutons de framework, ou tout autre élément, mais vous devrez peut-être d'abord retirer leur remplissage et les régler à la hauteur souhaitée.

Dans ce cas, les onglets en matériau angulaire, qui sont assez délicats pour les faire fonctionner comme un navigateur de site Web "standard".

Notez que le pointeur change dès que vous entrez dans l'onglet: les <a> sont maintenant étirés pour correspondre à leurs dimensions parent. 

Hors sujet, remarquez à quel point un matériau angulaire sans défaut affiche l'effet d'entraînement, même sur une "grande surface".

.md-header{
/* THIS IS A CUSTOM HEIGHT */
    height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

md-tab{    
    padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}

a{
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 100%; 
}

MISE À JOUR 2018

AngularJS Material émet un avertissement (léger) lors de l’utilisation de flex sur des éléments de bouton; ne supposez donc pas que tous les éléments/balises HTML peuvent gérer display:flex correctement ou avoir un comportement homogène sur tous les navigateurs.

N'oubliez pas de consulter flexbugs en cas de comportement inattendu dans un navigateur particulier.

8
Christian Bonato

J'ai utilisé ce code pour remplir la largeur et la hauteur 100%

HTML

<ul>
    <li>
        <a>I need to fill 100% width and height!</a>
    </li>
<ul>

CSS

li a {
   display: block;
   height: 100%; /* Missing from other answers */
}
1
Michael

Une approche différente: 

<ul>
    <li>
        <a></a>
        <img>
        <morestuff>TEXTEXTEXT</morestuff>
    </li>
</ul> 

a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: [higher than anything else inside parent]
    width:100%;
    height: 100%;
}

Ceci est utile si le conteneur du lien contient également des images et autres à l'intérieur, ou si sa taille est potentiellement différente en fonction de la taille de l'image/du contenu. Avec cela, la balise d'ancrage elle-même peut être vide et vous pouvez organiser d'autres éléments à l'intérieur du conteneur de l'ancre comme vous le souhaitez. Anchor correspondra toujours à la taille du parent et sera au-dessus pour rendre la totalité de li cliquable.

1
Aidan Miles

Changer la propriété display en block ne fonctionnait pas pour moi ... J'ai enlevé le padding de li et lui ai mis le même.

  li a {
        display:block;  
        padding: 4px 8px;  

  }
1
Pranav B

Utilisez line-height et text-indent au lieu de remplir l’élément li et utilisez display: block; pour balise d'ancrage

0
niyas
<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
    display:block;
}
</style> 
</head>
<body>
    <ul id="menu">
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">Test</a></li>
    </ul>
</body>
</html>

Vous devriez essayer d'éviter d'utiliser une classe sur chaque balise afin que votre contenu reste facile à gérer.

0
Jake

Je voulais cette fonctionnalité uniquement dans l'onglet i.e ci-dessous 720px.

@media(max-width:720px){
  a{
    display:block;
    width:100%;
  }
}
0
Michael Philips