cómo establecer el ancho del texto de la etiqueta de anclaje usando css?

Question

I tienen html y css como abajo -

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

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

pude ver que el SPAN se extiende al 100% de la anchura disponible (debido a display: block). Como a continuación

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

En Firefox, puedo hacer clic en cualquier lugar en el cuadro de arriba y me lleva a la página enlazada. Sin embargo, en IE (IE 7) obtengo el cursor como mano solo cuando coloco el cursor sobre el texto "Texto" solamente.

¿Qué hackeo tendré que hacer para que funcione (igual que en FF) en IE también?

Traté de colocar la etiqueta de anclaje en sí (no solo el texto) en el lapso, pero no va a funcionar.

Gracias.

Answer 1

Ajuste el anclaje y elimine la luz.

(El problema se debe a la forma en que algunos navegadores manejan elementos que son display: block elementos en el interior que son display: inline. Puede trabajar alrededor de ella por labrar tanto el ancla y la envergadura, pero el lapso parece redundante en este ejemplo)

Answer 2

para su etiqueta <a>, haga que el estilo "display: block; width: 100%;"

Answer 3

Definitivamente, debe eliminar el tramo y aplicar esa clase a la etiqueta de anclaje. No creo que deba establecer el ancho al 100% explícitamente, pero podría estar equivocado.

Answer 4

Elimine el tramo adicional y coloque esa clase de título en el enlace mismo. A continuación, agregue ancho: 100%; al css.

Menos marcado es a menudo mejor, es por eso que debe eliminar el lapso adicional.

Answer 5

también se puede usar margen o padding

Answer 6

dar un estilo para anclar de display:block y max-width:30px !important; tamaño máximo de ancho puede ser cualquier Try

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