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


88

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.


1
Başlıklar için başlık etiketleri (h1, h2, h3, ...) kullanmalısınız. Anlamsal olarak daha doğru.
Pickels

1
Evet, haklısın Pickels. Yardımlarınız için herkese teşekkürler. Bu benim son css'im. Benim için harika çalışıyor: <style> h4 {display: inline-block; yakınlaştırma: 1; * ekran: satır içi; kenar boşluğu: 0px; yükseklik: 25px; } </style>
Kelvin

Yanıtlar:


142

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.


Değeri ne olursa olsun, IE7 desteklemiyor inline-block.
Scott Cranfill

Np. @Scott: Bunu W3'te görmüyorum - işte söyledikleri:Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".
casraf

2
@henasraf - @ Scott doğru, bunu hızlılık
Nick Craver

2
Alıntı:IE 6/7 accepts the value only on elements with a natural display: inline.
casraf

1
Ahah, o spanzamana uygulanırsa çalışacağını tahmin ediyorum . Bilgi için teşekkürler, henasraf.
Scott Cranfill


13

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

5

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


0

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.


0

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

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

-4

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.


3
Ya da saçmalığımı tamamen görmezden gelin ve henasraf'ın cevabını kullanın :)
Seth Petry-Johnson

Aşağı oylama yorumları, yasal olarak katkıda bulunmak isteyenlerin cesaretini kırar. Yapma! Bunun yerine biraz yapıcı geri bildirimde bulunun ya da muhtemelen daha çok konu hakkındaki kendi fikrinizi verin.
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.