2011-01-20 21 views
99

¿Es posible establecer el ancho y el alto en píxeles en una etiqueta de anclaje? Me gustaría tener la etiqueta de anclaje para tener una imagen de fondo mientras conserva el texto dentro del anclaje.Configuración de ancho y alto en una etiqueta A

<li><a href="#">Something</a></li> 

li { 
    width: 32px; 
    height: 32px; 
    background-color: orange; 
} 

li a { 
    width: 32px; 
    height: 32px; 
    background-color: red; 
} 

Respuesta

218

Usted necesita para hacer su anclaje display: block o display: inline-block; y luego se aceptarán los valores de anchura y altura.

+0

sofisticado y simple! –

5

No es un duplicado exacto (por lo que puedo encontrar), pero este es un common problem.

display:block es lo que necesita. pero debe read the spec para entender por qué.

63

También puede usar display: inline-block. La ventaja de esto es que establecerá el alto y el ancho como un elemento de bloque, pero también lo configurará en línea para que pueda tener otra etiqueta junto al mismo, lo que permite el espacio principal.

Puede encontrar más información sobre display properties here

+0

Estaba buscando una solución para establecer el ancho de la etiqueta de anclaje como su contenido de texto y no en un cierto ancho y alto, por lo que configurarlo en "bloque en línea" hizo exactamente el truco. Gracias. – TheCuBeMan

7

Todas estas sugerencias funcionan a menos que poner los anclajes dentro de una lista de UL.

<ul> 
    <li> 
     <a>click me</a>> 
    </li> 
</ul> 

Luego, todas las reglas de hojas de estilo en cascada se anulan en el navegador Chrome. El ancho se vuelve automático. Luego debe usar reglas de CSS en línea directamente en el propio anclaje.

Cuestiones relacionadas