Cegah pembungkus span atau div

Saya ingin menempatkan sekelompok divelemen dengan lebar tetap ke dalam wadah dan memunculkan bilah gulir horizontal. The div/ spanelemen harus muncul dalam garis, kiri ke kanan dalam urutan mereka muncul dalam HTML (dasarnya terbuka).

Dengan cara ini bilah gulir horizontal akan muncul dan dapat digunakan sebagai gantinya bilah gulir vertikal untuk membaca konten (kiri ke kanan).

Saya sudah mencoba melayang mereka dalam wadah dan kemudian meletakkan white-space: nowrapgaya pada wadah, tetapi sayangnya, sepertinya masih membungkus.

Ide ide?

Itu terlihat seperti ini:

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

UPDATE:
Lihat situs untuk contoh, tetapi mereka salah tentang tidak menjadi cara lain - saya yakin artikelnya sudah tua.

Coba ini:

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

Perhatikan bahwa Anda dapat menghilangkan .slideContainer { overflow-x: scroll; }( browser mana yang mungkin atau mungkin tidak mendukung saat Anda membaca ini), dan Anda akan mendapatkan bilah gulir di jendela alih-alih pada wadah ini.

Kuncinya di sini adalah display: inline-block. Ini memiliki dukungan lintas-browser yang layak saat ini, tetapi seperti biasa, ada baiknya menguji di semua browser target untuk memastikan.

Ini berfungsi hanya dengan ini:

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

Awalnya saya punya float : left;dan itu mencegahnya bekerja dengan benar.

Terima kasih telah memposting solusi ini.

Terutama ketika menggunakan sesuatu seperti Bootstrap Twitter , white-space: nowrap;tidak selalu berfungsi dalam CSS saat menerapkan bantalan atau margin untuk anak div. Namun sebaliknya, menambahkan border: 20px solid transparent;gaya setara di tempat padding / margin bekerja lebih konsisten.

Seperti yang disebutkan, Anda dapat menggunakan:

overflow: scroll;

Jika Anda hanya ingin bilah gulir muncul bila perlu, Anda dapat menggunakan opsi "otomatis":

overflow: auto;

Saya tidak berpikir Anda harus menggunakan properti "float" dengan "overflow", tetapi saya harus mencoba contoh Anda terlebih dahulu.

Sepertinya div tidak akan melampaui lebar tubuh mereka. Bahkan dalam div lain.

Saya melemparkan ini untuk menguji (tanpa DOCTYPE) meskipun dan itu tidak berfungsi sebagai pikiran.

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

Apa yang saya pikirkan adalah bahwa div bagian dalam dapat dimuat melalui iFrame, karena itu adalah halaman lain dan isinya bisa sangat luas.