S'il est une propriété utile tant pour un menu que pour le titre d'une page dont on voudrait que le lien prenne toute la largeur, c'est bien display: block;
appliquée à une balise de lien (a) !
Petite illustration. Nous construisons une liste de la forme :
<ul>
<li><a href="#">lien 1</a></li>
<li><a href="#">lien 2</a></li>
</ul>
avec la feuille de style :
ul{
list-style:none;
width:300px;
margin:0;
padding:0;
border:1px green solid;
}
li {
list-style:none;
text-align:center;
padding:0;
}
Si le lien est stylé comme ceci :
a {
border:1px blue solid;
width:100%;
padding:0;
}
cela donne pas un lien sur toute la largeur (100%) du bloc parent :
en revanche :
a {
border:1px blue solid;
width:100%;
padding:0;
display:block;
}
le fait :
Second exemple : le titre de page.
Voici le code html suivant :
<div id="pageHeader">
<h2><a href="#">Mon titre</a></h2>
</div>
Et sa feuille de style :
#pageHeader h2 a{
background:#36C;
width:100%;
height:110px;
}
Voici ce qu'on obtient :
si maintenant je corrige la feuille :
#pageHeader h2 a{
background:#36C;
width:100%;
height:110px;
display:block;
}
nous obtenons :
Et le lien est actif sur l'ensemble de la partie en bleu !
Edit : correction du titre (petite coquille...) Merci Sibélius pour l'avoir signalé !
Edit 2 : A noter les commentaires pertinents de notre éleveur de choucroute national, au bas de ce billet