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

suena un poco loco, pero no puedo establecer el alto y el ancho de a elementos de mi navegación.Cómo establecer un: alto/ancho del enlace con css?

#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?

Fuente

2011-05-13 Lost in OWL

posible duplicado de [Configuración de ancho y alto en una etiqueta A] (http://stackoverflow.com/questions/4743254/setting-a-width-and-height-on-an-a-tag) –

165

agregar visualización: bloque;

a-tag es un elemento en línea por lo que se ignoran el alto y el ancho.

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

Fuente

2011-05-13 09:59:44

+22

Bloque tiene el efecto secundario de que creará una nueva línea después del elemento. –

+30

cambiándolo para visualizar: bloque en línea; resuelve ese problema – RandomUs1r

reputación ++ buena respuesta concisa – cwiggo

Su problema es probablemente que los elementos son adisplay: inline por naturaleza. No puede establecer el ancho y alto de los elementos en línea.

Debería establecer display: block en el a, pero eso traerá otros problemas debido a que los enlaces comienzan a comportarse como elementos de bloque. La cura más común es darles float: left, por lo que se alinean uno al lado del otro de todos modos.

Fuente

2011-05-13 09:59:52

Flotarlos probablemente evitará que su elemento primario se expanda a su alrededor. –

@Cobra yup, pero eso se soluciona fácilmente. [En 2011, ¿hay alguna necesidad de clearfix?] (Http://stackoverflow.com/q/5565668) –

Entonces, ¿tenemos que arreglar la solución aquí? Eso no suena muy bien. –

Desde el definition of height:

aplica a: todos los elementos excepto elementos en línea no reemplazados, columnas de mesa, y los grupos de columnas

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

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

Fuente

2011-05-13 10:00:02 Quentin

Los anclajes deberán ser de un tipo de pantalla diferente de su valor predeterminado para tomar una altura. display:inline-block; o display:block;.

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

Fuente

2011-05-13 10:00:23

línea-altura también es una gran solución. Pero cuando el texto en el enlace va más de 2 líneas, el espacio en blanco entre esas 2 líneas es enorme. –

Gracias a RandomUs 1R para esta observación:

cambiándola a display: inline-block; resuelve ese problema - RandomUs1r de mayo de 14 '13 a las 21:59

Yo probé a mí mismo por una barra de menú de navegación superior, de la siguiente manera:

primer estilo del elemento "li" de la siguiente manera:

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

Entonces el estilo de la "a"> elemento como sigue:

anchura: 100%;

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

Fuente

2014-04-05 04:24:23 user123318

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

Respuesta

Cuestiones relacionadas