Konteynerlerin Sarılmasını Önleme (span veya div)

Question

Sabit genişlikteki bir grup öğeyi bir kaba koyun ve yatay kaydırma çubuğunun görünmesini istiyorum. Div/span öğeleri, HTML'de göründükleri sırayla soldan sağa doğru bir satırda görünmelidir. (temelde açılmamış)

Bu şekilde yatay kaydırma çubuğu görünecek ve içerik (soldan sağa) boyunca okumak için dikey kaydırma çubuğu yerine kullanılabilir.

Bunları bir kapta yüzmeyi denedim ve daha sonra kapta "white-space: nowrap" stili koymayı denedim, ancak hala sarılıyor gibi görünüyor. Fikirler?

.slideContainer { 
 
    white-space: nowrap; 
 
} 
 
.slide { 
 
    width: 800px; 
 
    float: left; 
 
    display: inline; 
 
}

<div class="slideContainer"> 
 
    <div class="slide">Some content</div> 
 
    <div class="slide">More content</div> 
 
    <div class="slide">Even More content!</div> 
 
</div>

Güncelleme: örnekler için site bakın, ama başka bir yolu olmadığı konusunda yanıldınız - Ben yazı olsa eski eminim

Böyle görünüyordu.

Answer 1

bu deneyin .

Buradaki anahtar display: inline-block. Bu, bugünlerde decent cross-browser support var, ancak her zamanki gibi, emin olmak için tüm hedef tarayıcılarda test etmeye değer.

Answer 2

Tanrılar vücudunun genişliğinin dışına çıkmayacak gibi görünüyor. Başka bir div içinde bile.

Bunu test etmek için attım (bir doctype olmadan) ve düşünülmüş gibi çalışmıyor. bu başka sayfası ve içeriğinin çok geniş olabilir çünkü

.slideContainer { 
 
    overflow-x: scroll; 
 
} 
 
.slide { 
 
    float: left; 
 
}

<div class="slideContainer"> 
 
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div> 
 
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div> 
 
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div> 
 
</div>

Ne ben düşünüyorum, iç div takımından bir iFrame üzerinden yüklenen olabilir olmasıdır.

overflow: scroll; 

Eğer sadece gerekli, "otomatik" seçeneğini kullanabilirsiniz zaman kaydırma çubuğu görünmesini istiyorsanız: Sanmıyorum

overflow: auto; 

Answer 3

olarak kullanabileceğiniz söz "taşma" özelliğini "taşma" ile kullanmalısınız, ancak önce sizin örneklemenizi denemeliyim. Eğer .slideContainer { overflow-x: scroll; } atlayabilirsiniz

.slideContainer { 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
} 
 
.slide { 
 
    display: inline-block; 
 
    width: 600px; 
 
    white-space: normal; 
 
}

<div class="slideContainer"> 
 
    <span class="slide">Some content</span> 
 
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
 
    <span class="slide">Even more content!</span> 
 
</div>

Not (Bunu okurken hangi browsers may or may not support) ve pencerenin üzerinde yerine bu kapsayıcı üzerinde bir kaydırma çubuğu alırsınız:

Answer 4

Sadece bu çalışır:

yaptım

.slideContainer { 
    white-space: nowrap; 
} 
.slide { 
    display: inline-block; 
    width: 600px; 
    white-space: normal; 
} 

aslen float : left; varsa ve o, doğru çalışmasını engelledi.

Bu çözümü gönderdiğiniz için teşekkür ederiz.

Answer 5

Özellikle Twitter'ın Bootstrap gibi bir şey kullanırken, white-space: nowrap;, div numaralı bir çocuğa dolgu veya kenar boşluğu uygularken her zaman CSS'de çalışmaz. Ancak bunun yerine, eşdeğer border: 20px solid transparent; stili ekleyerek dolgu/kenar boşluğu daha tutarlı çalışır.