Comment faire en sorte que les balises d'ancrage couvrent toute la largeur des éléments de la liste ?

Balises d'ancrage pleine largeur dans les éléments de liste

Introduction

Lors de la conception de menus de navigation, il est courant de vouloir les balises d'ancrage () pour s'étendre sur toute la largeur des éléments de la liste (

). Cependant, définir l'attribut width sur les balises n'a généralement aucun effet.

Solution

Pour obtenir cet effet d'étirement, nous devons modifier la propriété d'affichage de la balise d'ancrage. Les éléments en ligne comme ne peuvent pas avoir leur largeur définie. Au lieu de cela, nous devons les convertir en éléments de bloc ou de bloc en ligne :

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

Utilisation

Une fois la règle CSS définie, ajoutez la classe "wide" aux balises d'ancrage dans le

elements :

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

Notes

• Dans Internet Explorer 6, il peut être possible de définir la largeur des éléments en ligne, mais cela est dû à une implémentation CSS incorrecte.

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!