SPAN için yükseklik özelliği nasıl ayarlanır

Aşağıdaki kodu önceden tanımlanmış yükseklik ile uzatılabilir hale getirmem gerekiyor

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

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

Ancak span satır içi öğe olduğundan, "yükseklik" özelliği çalışmaz.

Bunun yerine div kullanmayı denedim , ancak üst öğenin genişliğine kadar genişleyecek. Ve genişlik esnek olmalıdır.

Bunun için iyi bir çözüm öneren var mı?

Şimdiden teşekkürler.

display:inline-blockCSS'de verin - bu, istediğiniz şeyi yapmasına izin vermelidir.
Uyumluluk açısından: IE6 / 7 , tuhaflık modunun önerdiği gibi bununla çalışacaktır:

IE 6/7 değeri yalnızca doğal görüntüye sahip öğelerdeki kabul eder: satır içi.

Kullanım

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

Tek numara tarayıcı desteğidir. Desteklenen tarayıcılar listenizin burada satır içi bloğu işleyip işlemediğini kontrol edin .

bu, display: inline-block'un tüm tarayıcılarda çalışmasını sağlamak içindir:

Yeterince ilginç bir şekilde, IE'de (6/7), hasLayout'u "zoom: 1" ile tetiklerseniz ve ardından ekranı satır içi olarak ayarlarsanız, bir satır içi blok gibi davranır.

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

Bunu bir blok öğesi yapmak istemediğinizi varsayarsak, deneyebilirsiniz:

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

Ama kolay çözüm sadece tedavi etmektir .titleblok seviyesinden eleman olarak ve uygun başlık etiketlerini kullanarak <h1>yoluyla <h6>.

açıklık { display: table-cell; height: (your-height + px); vertical-align: middle; }

Aralıkların bir tablo hücresi (veya bu konuda başka herhangi bir öğe) gibi çalışması için, yükseklik belirtilmelidir. Genişliklere bir yükseklik verdim ve gayet iyi çalışıyorlar - ama istediklerinizi yapmaları için yükseklik eklemelisiniz.

Elbette bir başka seçenek de Javascript kullanmaktır (burada Jquery):

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

Bu durumda neden bir aralığa ihtiyacınız var? Yüksekliği biçimlendirmek istiyorsanız, sadece bir div kullanabilir misiniz? Bir div ile deneyebilirsiniz display: inline, ancak aslında bir span ile aynı şeyi yapıyor olacağınız için bu aynı sorunu yaşayabilir.