Comment étirer les balises d'ancrage pour remplir tout l'espace d'un élément de liste ?

Solution pour étirer les balises d'ancrage

Pour qu'une balise d'ancrage () remplisse tout l'espace au sein d'un élément de liste (

), il est nécessaire pour surmonter la nature en ligne par défaut des balises d'ancrage. Les éléments en ligne, tels que , n'ont généralement pas de largeurs ou de hauteurs fixes.

La nature problématique des éléments en ligne découle de leur utilisation pour du texte fluide. Compte tenu de l'incertitude du retour à la ligne, définir une largeur fixe pour les éléments en ligne n'aurait pas de sens.

Pour activer le contrôle de la largeur de la balise d'ancrage, il est crucial de modifier sa propriété d'affichage. Deux options valides existent :

Options de propriété d'affichage :

• Bloquer : Cette option transforme la balise d'ancrage en un élément de niveau bloc , qui peut avoir des largeurs et des hauteurs prédéfinies.
• Inline-Block : Cette option combine les propriétés en ligne et en bloc, permettant à la balise d'ancrage de se comporter comme du texte en ligne tout en restant sensible au contrôle de la largeur.

Exemple de code :

Pour appliquer la propriété d'affichage de bloc ou de bloc en ligne, utilisez CSS comme indiqué ci-dessous :

<code class="css">a.wide {
    display: block;
}

a.wide-inline {
    display: inline-block;
}</code>

Implémentation HTML :

Incorporez la propriété d'affichage modifiée dans votre code HTML.

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

Remarque :

Pendant qu'il est possible de définir la largeur des éléments en ligne dans IE6, ce comportement est considéré comme une implémentation incorrecte de CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!