Açıklık veya div kaydırılmasını önleme

divBir konteynere sabit genişlikte bir grup eleman koymak ve yatay kaydırma çubuğunun görünmesini istiyorum. div/ spanElemanları HTML'de (esasen Çizelgesi) görünen sırayla soldan sağa, bir çizgide görünmelidir.

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

Onları bir kapta yüzdüm ve daha sonra kabın üzerine bir white-space: nowrapstil koydum, ama ne yazık ki, hala sarılıyor gibi görünüyor.

Fikirler?

Şöyle görünüyordu:

.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 siteye
bakın , ancak başka bir yol olmamakla ilgili yanlışlardı - eminim makale eski.

Bunu dene:

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

Atlayabilirsiniz .slideContainer { overflow-x: scroll; }( bunu okuduğunuzda hangi tarayıcılar destekleyebilir veya desteklemeyebilir ) ve bu kapsayıcı yerine pencerede bir kaydırma çubuğu alırsınız.

Buradaki anahtar display: inline-block. Bu, günümüzde iyi bir çapraz tarayıcı desteğine sahip , ancak her zamanki gibi, emin olmak için tüm hedef tarayıcılarda test etmeye değer.

Sadece şu şekilde çalışır:

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

Başlangıçta yaptım float : left;ve bu düzgün çalışmasını engelledi.

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

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

Belirtildiği gibi kullanabilirsiniz:

overflow: scroll;

Kaydırma çubuğunun yalnızca gerektiğinde görünmesini istiyorsanız, "otomatik" seçeneğini kullanabilirsiniz:

overflow: auto;

Ben "taşma" ile "şamandıra" özelliğini kullanmak gerektiğini sanmıyorum, ama önce örnek denemek gerekir.

Divs vücut 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 doktrin olmadan) ve düşünce olarak çalışmaz.

.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 düşünüyorum, çünkü başka bir sayfa ve içeriği çok geniş olabilir, iç div'ın bir iFrame aracılığıyla yüklenebilir.