¿Cómo configurar un: enlace alto / ancho con css?

84

Simplemente no puedo establecer la altura y el ancho de los aelementos de mi navegación.

#header div#snav div a{
    width:150px;
    height:77px;
}

#header div#snav div a:link{
    width:150px;
    height:77px;
}


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

¿Alguna idea de lo que estoy haciendo mal?

html css Voto a favor
fuente

Respuestas:

194

agregar pantalla: bloque;

a-tag es un elemento en línea, por lo que se ignoran su altura y ancho.

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}
Stijn Janssen
fuente
24
Block tiene el efecto secundario de que creará una nueva línea después del elemento.
Cobra_Fast
27

Los anclajes deberán ser de un tipo de visualización diferente al predeterminado para tomar una altura. display:inline-block;o display:block;.

También verifique line-heightcuál podría ser interesante con esto.

Cobra_Fast
fuente
4
line-height también es una gran solución. Pero cuando el texto del enlace supera las 2 líneas, el espacio en blanco entre esas 2 líneas es enorme.
Stijn Janssen
8

Tu problema es probablemente que los aelementos son display: inlinepor naturaleza. No puede establecer el ancho y el alto de los elementos en línea.

Tendría que establecer display: blockel a, pero eso traerá otros problemas porque los enlaces comienzan a comportarse como elementos de bloque. La cura más común para eso es darlos float: leftpara que se alineen uno al lado del otro de todos modos.

Pekka
fuente
1
Hacerlos flotar probablemente evitará que su elemento padre se expanda a su alrededor.
Cobra_Fast
@Cobra sí, pero eso se arregla fácilmente. En 2011, ¿hay alguna necesidad de clearfix?
Pekka
1
¿Entonces tenemos que arreglar la solución aquí? Eso no suena muy bien.
Cobra_Fast
5

De la definición de altura :

Se aplica a: todos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas

Un aelemento es, por defecto, un elemento en línea (y no se reemplaza).

Debe cambiar la visualización (directamente con la propiedad de visualización o indirectamente, por ejemplo, con flotante).

Quentin
fuente
4

Gracias a RandomUs 1r por esta observación:

cambiándolo para mostrar: inline-block; resuelve ese problema. - RandomUs1r 14 de mayo de 2013 a las 21:59

Lo probé yo mismo para una barra de menú de navegación superior, de la siguiente manera:

Primero estilo el elemento "li" de la siguiente manera:

pantalla: bloque en línea;
ancho: 7em;
alineación de texto: centro;

Luego, estilo el elemento "a"> de la siguiente manera:

ancho: 100%;

Ahora los enlaces de navegación tienen el mismo ancho con el texto centrado en cada enlace.

usuario123318
fuente