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>

Sin embargo, desde duración es elemento en línea, propiedad de "altura" no funcionará.

He intentado utilizar div en su lugar, pero se ampliará hasta el ancho del elemento superior. Y el ancho debe ser flexible.

Puede alguien sugerir ninguna solución buena para esto?

Gracias de antemano.

Answer 1

Le daría una display:inline-block en CSS - que debería dejar que haga lo que quiere
. En términos de compatibilidad: IE6 / 7 trabajo con este, como peculiaridades modo sugiere:

  

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

Answer 2

Uso

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

El único truco es el apoyo del navegador. Compruebe si su lista de asas navegadores compatibles inline-block aquí .

Answer 3

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 poner la pantalla en línea, se comporta como un bloque en línea

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

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

Sin embargo, la solución más fácil es tratar simplemente el .title como un elemento en bloque, y el uso de las etiquetas de encabezado correspondiente <h1> través <h6>.

Answer 5

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. Me he dado palmos de altura, y funcionan muy bien -. Pero hay que agregar altura a conseguir que hagan lo que usted quiere

Answer 6

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

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

Answer 7

¿Por qué necesita un lapso en este caso? Si desea que el estilo de la altura podría usted sólo tiene que utilizar un div? Usted puede tratar de un div con display: inline, aunque eso podría tener el mismo problema ya que és, en efecto, estar haciendo lo mismo que un palmo.