Establecer un ancho y alto en una etiqueta A


131

¿Es posible establecer el ancho y la altura en píxeles en una etiqueta de anclaje? Me gustaría tener la etiqueta de anclaje para tener una imagen de fondo mientras se retiene el texto dentro del ancla.

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

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}
<li><a href="#">Something</a></li>

Respuestas:


288

Que necesita para hacer su ancla display: blocko display: inline-block;y luego se va a aceptar los valores de anchura y altura.


66

También puedes usar display: inline-block . La ventaja de esto es que establecerá la altura y el ancho como un elemento de bloque, pero también lo configurará en línea para que pueda tener otra etiqueta justo al lado, permitiendo el espacio principal.

Puede encontrar más información sobre las propiedades de visualización aquí


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 establecerlo en "bloque en línea" hizo el truco exactamente. Gracias.
TheCuBeMan

7

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

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

Luego, cualquier regla de hoja de estilo en cascada se anula en el navegador Chrome. El ancho se vuelve automático. Luego debe usar reglas CSS en línea directamente en el propio ancla.



Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.