HTML + CSS: el ancho ‘a’ no funciona

Tengo el siguiente código:

Parte de 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 ; }  

Parte de HTML:

Todo funciona bien, pero cuando agrego el elemento ‘DOCTYPE’ al principio del documento HTML:

  

el ancho del elemento ‘a’ no se toma en cuenta.

Pregunta 1: ¿Por qué?

Pregunta 2: ¿Cómo arreglar eso?

¡Muchas gracias!

Pregunta 1: ¿Por qué?

Porque, por defecto, no es un elemento de bloque .

Pregunta 2: ¿Cómo arreglar eso?

Conviértalo en un elemento de bloque usando display: block; , o un bloque en línea por display: inline-block; bloque en display: inline-block; .

hacer bloque para la etiqueta de anclaje agregar display:block con estilo

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

NOTA: no repita todos los elementos en .menu a:link clase de .menu a:link … simplemente agregue cambios o nuevos estilos. NOTA: siempre use minúsculas en html y código css

agregar bloque de visualización en a:

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

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

CSS se trata de punto. El atributo toma su lugar dependiendo de esto. Eche un vistazo a la opinión de Google University sobre el asunto. Esto ayudará mucho a comprender los conceptos básicos y un poco más allá.

Esto funcionó para mí, pero como quería que todos mis enlaces estuvieran en la misma línea, utilicé display: inline-block;

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