HTML + CSS: 'a' ancho no funciona

tengo el siguiente código:HTML + CSS: 'a' ancho no funciona

parte CSS: parte

<style type="text/css"> 
    .menu 
    { 
     width:200px; 
    } 

    .menu ul 
    { 
     list-style-image:none; 
     list-style-type:none; 
    } 

    .menu li 
    { 
     margin:2px; 
    } 

    .menu A 
    { 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    } 

    .menu A:link 
    { 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    } 
</style>

HTML:

Todo funciona bien, pero cuando agrego elemento 'DOCTYPE' en el principio del documento HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

la anchura del elemento 'a' no se tiene en cuenta.

Pregunta 1: ¿Por qué?

Pregunta 2: ¿Cómo corregir eso?

¡Muchas gracias!

Fuente

2011-01-16 Budda

Pregunta 1: ¿Por qué?

Porque no es por defecto un block element.

Pregunta 2: ¿Cómo arreglar eso?

lo convierten en un elemento de bloque usando display: block;, o un bloque de línea por display: inline-block;.

Fuente

2011-01-16 17:41:14 BalusC

wow hombre, que acaba me salvó un montón de dolor de cabeza! ¡No pude entender por qué el ancho de mis etiquetas de anclaje no se pudo ajustar! – imjp

http://bit.ly/1QQi3Rd Gran respuesta. – Luis

Un enlace es un elemento en línea por defecto; agregue display: block; y usará el ancho establecido.

Fuente

2011-01-16 17:42:16 Alec

CSS es todo sobre el punto. El atributo toma su lugar dependiendo de esto. Eche un vistazo al asunto Google University's. Esto ayudará mucho a comprender los conceptos básicos y un poco más allá.

Fuente

2011-01-16 17:42:42 CharlesJHardy

bloque de visualización en un complemento: Bloque

.menu A 
    { 
     display: block; 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    }

Fuente

2011-01-16 17:43:31 shankhan

marca de etiqueta de anclaje añadir display:block en estilo

.menu a 
{ 
    display:block; 
    height:25px; 
    width:170px; 
    background:url(./images/button-51.png); 
    padding:2px 5px ; 
}

NOTA: dont repet todos los elementos en .menu a:link clase .. sólo tiene que añadir los cambios o nuevos estilos. NOTA: Siempre use minúsculas en el código HTML y CSS

Fuente

2011-01-16 18:52:16 Abudayah

Esto funcionó para mí, pero ya que quería que todos mis enlaces a estar en la misma línea Solía display: inline-block;

Fuente

2013-04-16 17:13:56 schwechel

.menu A 
    { 
     float: left; 
     height:25px; 
     width:170px; 
     background:url(./images/button-51.png); 
     padding:2px 5px ; 
    }

Fuente

2013-09-07 09:07:18

Respuesta

Cuestiones relacionadas