Cómo establecer la propiedad de altura para SPAN

Question

Necesito hacer siguiente código estirable con la altura predefinida

<style> 
.title{ 
    background: url(bg.gif) no-repeat bottom right; 
    height: 25px; 
} 
</style> 

<span class="title">This is title</span> 

Pero desde lapso está elemento en línea, "altura" propiedad no funcionará.

Intenté usar div en su lugar, pero se expandirá hasta el ancho del elemento superior. Y el ancho debe ser flexible.

¿Alguien puede sugerir alguna buena solución para esto?

Gracias de antemano.

Answer 1

Déle un display:inline-block en CSS, eso debería permitirle hacer lo que quiera.
En términos de compatibilidad: IE6/7 voluntad trabajo con este, como modo de peculiaridades sugiere:

IE 6/7 acepta el valor sólo en elementos con una pantalla natural: inline.

Answer 2

¿Por qué necesita un tramo en este caso? Si quieres diseñar la altura, ¿podrías usar un div? Puede probar un div con display: inline, aunque podría tener el mismo problema ya que en realidad estaría haciendo lo mismo que un lapso.

Answer 3

Uso

.title{ 
    display: inline-block; 
    height: 25px; 
} 

El único truco es el soporte del navegador. Check if your list of supported browsers handles inline-block here.

Answer 4

Suponiendo que usted no quiere que sea un elemento de bloque, entonces es posible que trate de:

.title { 
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */ 
    line-height: 2em; /* or */ 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 

embargo, la solución más fácil es simplemente tratar el .title como un elemento en bloque, y utilizando la apropiada etiquetas de encabezado <h1> hasta <h6>.

Answer 5

esto es hacer que la pantalla: el trabajo inline-block en todos los navegadores:

quirkly suficiente, en el IE (6/7), si se dispara hasLayout con "zoom: 1" y luego ajuste la pantalla a inline , se comporta como un bloque en línea.

.inline-block { 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
} 

Answer 6

lapso { display: table-cell; height: (your-height + px); vertical-align: middle; }

Para luces para trabajar como una celda de la tabla (o cualquier otro elemento, para el caso), la altura debe ser especificado. He dado una altura a los tramos, y funcionan muy bien, pero debes agregarle altura para que haga lo que quieras.

Answer 7

Otra opción, por supuesto, es el uso de Javascript (jQuery aquí):

$('.box1,.box2').each(function(){ 
    $(this).height($(this).parent().height()); 
})