Pregunta 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.

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


74
2018-05-13 09:57


origen


Respuestas:


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

169
2018-05-13 09:59



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

Verifique también line-height que podría ser interesante con esto.


26
2018-05-13 10:00



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

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


7
2018-05-13 09:59



Desde el 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 a elemento es, por defecto, un elemento en línea (y no es reemplazado).

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


5
2018-05-13 10:00



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.


1
2018-04-05 04:24