span içeren basit div boyut doğru olmayacaktır

CSS hakkında oldukça bilgili olduğumu düşündüm ama bu basit sorun beni şaşırtıyor.span içeren basit div boyut doğru olmayacaktır

< div yayılma dolgu varsa yayılma yüksekliğinden daha küçük olması div yüksekliği > < yayılma > örnek metin </span > </div >

sonuçlanır.

Div boyutunu doğru yapmak için "float" kullanmanın yolları olduğunu farkettim, ancak yüzer her zaman istenmeyen yan etkilere neden oluyor gibi görünüyor.

Divanın içeriğini sığacak şekilde boyutlandırması için temiz ve basit bir yöntem yok mu? Bana oldukça basit görünüyor. Belki bir şey özlüyorum.

kaynak

2010-04-10 brad

Yayında "display: block" ifadesinin kullanılması bir çözümdür, ancak çok temiz değildir çünkü onu div (veya en azından en uzun eleman) 'dan daha büyük olabilecek her şeyde yapmanız gerekir. –

"CSS hakkında oldukça bilgili" ... CSS'yi anlamak için bir son yok, değil mi ?! ve daha az "basit" problemler hayal edebileceğinden daha az. – Smandoli

Temel durumda, yalnızca display: inline-block yayılımını kullanın. İşte

benim test durumdur (FF, Chrome ve IE 6-8'de işleri):

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Span padding test</title> 
</head> 
<body> 
    <div style="background-color: yellow; border: 1px solid red;"> 
     <span style="padding: 50px; display: inline-block;">test</span> 
    </div> 
</body> 
</html>

nedeni bu bir satır içi eleman yüzen örtülü dönüştürür çünkü div ve yayılma düzeltmeleri float: left ekleyerek bir blok elemanına. Eğer div ve açıklıklar arasındaki nüansları bilmiyorsanız (blok ve satır içi elemanlar arasındaki fark), http://www.maxdesign.com.au/articles/inline/ no'lu okumanız yardımcı olacaktır.

Bunu çözmenin birkaç yolu daha vardır, ancak biçimlendirmenin ve stillerin geri kalanı hakkında daha fazla bilgi sahibi olmaksızın hangisinin en iyisi olduğunu söylemek zor.

kaynak

2010-04-12 17:47:53 timmfin

göstergeye dikkat edin: inline-block IE6'da çalışmıyor. Taşma: Ebeveyn divunda otomatik sorun IE6'da problemi çözebilir ve hatta çalıştırabilir – meo

Div'a overflow:auto ekleyin.

kaynak

2010-04-10 21:41:12 fuxia

Bu en iyi yoldur. Yine de dikkatli değilseniz kaydırma çubukları oluşturabilir. – tloflin

Bu benim için çalışmadı (Chromium 52'de). Bu, dilimin dolgusunun kesilmesine neden olur. – Pistos

span içeren basit div boyut doğru olmayacaktır

cevap

İlgili konular