comment définir la largeur du texte de balise d'ancrage en utilisant css?

Question

J'ai html et css comme ci-dessous -

.title { 
     display: block; background-color: red; 
    } 

<a href="#"> 
    <span class="title">Text</span> 
</a> 

Je pouvais voir que le SPAN couvre à 100% de la largeur disponible (en raison de display: block). Comme ci-dessous

|----------------------------------------------------| 
| Text            | 
|----------------------------------------------------| 

Dans Firefox, je peux cliquer n'importe où dans la boîte ci-dessus, et cela me mène à la page liée. Cependant, dans IE (IE 7) je reçois le curseur en tant que main seulement lorsque je survole le texte "Texte" seulement.

Quel hack je vais devoir faire pour le faire fonctionner (même comme il le fait en FF) dans IE aussi bien?

J'ai essayé de placer l'étiquette d'ancrage elle-même (pas seulement le texte) dans la portée, mais cela ne fonctionnera pas.

Merci.

Answer 1

Modélisez l'ancrage et retirez la portée.

(Le problème est dû à la façon dont certains navigateurs gèrent des éléments qui sont display: block éléments à l'intérieur qui sont display: inline. Vous pouvez travailler autour d'elle par le style à la fois l'ancre et la durée, mais la durée semble redondante dans cet exemple)

Answer 2

pour votre tag <a>, faites le style "display: block; width: 100%;"

Answer 3

Définitivement, vous devez supprimer la plage et appliquer cette classe à l'étiquette d'ancrage. Je ne pense pas que vous devez définir la largeur à 100% explicitement, mais je peux me tromper.

Answer 4

Supprimez l'espace supplémentaire et placez cette classe de titre sur le lien lui-même. Puis ajoutez la largeur: 100%; au css.

Moins de balisage est le meilleur souvent, c'est pourquoi vous devriez supprimer l'écart supplémentaire.

Answer 5

vous pouvez aussi utiliser de marge ou de rembourrage

Answer 6

Donnez un style à l'ancre de display:block et max-width:30px !important; taille maximale de largeur peut être tout

li a { 
    display: block; 
    height: 30px; 
    max-width: 30px !important; 
}