español - HTML+CSS: el ancho ''a'' no funciona
la declaración<! doctype html define (7)
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; .
Tengo el siguiente código:
Parte de CSS:
<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>
Parte de HTML:
Todo funciona bien, pero cuando agrego el elemento ''DOCTYPE'' al principio del documento HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
el ancho del elemento ''a'' no se toma en cuenta.
Pregunta 1: ¿Por qué?
Pregunta 2: ¿Cómo arreglar eso?
¡Muchas gracias!
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;
Un enlace es un elemento en línea por defecto; agregar display: block; y usará el ancho establecido.
agregar bloque de visualización en a:
.menu A
{
display: block;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}
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
.menu A
{
float: left;
height:25px;
width:170px;
background:url(./images/button-51.png);
padding:2px 5px ;
}