html - quede - Cómo establecer un: alto/ancho del enlace con css?

propiedades de links css

Question

suena un poco loco, pero no puedo establecer el alto y el ancho de los elementos 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?

Answer 1

De la definición de altura :

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

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

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

Answer 2

Gracias a RandomUs 1r por esta observación:

cambiándolo para mostrar: bloque en línea; resuelve ese problema - RandomUs1r 14 de mayo de 13 a 21:59

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

Primero, aplique el elemento "li" de la siguiente manera:

pantalla: bloque en línea;
ancho: 7em;
text-align: center;

A continuación, aplique el elemento "a"> de la siguiente manera:

ancho: 100%;

Ahora los enlaces de navegación son todos del mismo ancho con texto centrado en cada enlace.

Answer 3

Los anclajes necesitarán ser un tipo de pantalla diferente a la predeterminada para tomar una altura. display:inline-block; o display:block; .

También verifique line-height que podría ser interesante con esto.

Answer 4

Tu problema es probablemente que se display: inline elementos display: inline por naturaleza. No puede establecer el ancho y alto de los elementos en línea.

Debería establecer display: block en la 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 dejarlos float: left para que se alineen uno al lado del otro de todos modos.

Answer 5

agregar visualización: bloque;

a-tag es un elemento en línea por lo que su altura y ancho son ignorados.

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