¿Cómo establecer el ancho de un elemento en línea?

Question

Quiero diseñar un encabezado de pestaña. El código HTML está,

<div class="tab-header"> 
    <a href="" class="current">tab1-title</a> 
    <a href="">tab2-title</a> 
</div> 

ahora tengo que aplicar una imagen de fondo a la clase actual, también hacer que el efecto de este tipo,

Pero el elemento en línea a no es lo suficientemente grande para esta imagen de fondo , entonces ajusto el ancho y la altura del elemento a. Pero el ajuste falló, el ancho/alto del elemento no cambió.

¿Cómo podría obtener el efecto correcto?

Gracias.

Answer 1

Para aplicar ancho, configure la propiedad css 'display' en 'block' o 'inline-block'.

bloque: el elemento se ubicará en una sola línea. En tal caso, puede establecer flotación para que los enlaces estén en la misma línea;

inline-block; el elemento tendrá alto, ancho, etc., y múltiples elementos se ubicarán en la misma línea (bloque).

Answer 2

Deberás usar display:block en el ancla.

Answer 3

Uso

display: inline-block; 

en el elemento en línea. Con un poco de ajuste, tiene un amplio soporte para navegadores cruzados y es increíblemente útil para el tipo de diseño que está buscando.

Answer 4

la propiedad Conjunto display-inline-block, y entonces se puede establecer la width, height, y vertical-align según sea necesario.