Bagaimana membuat DIV tidak terbungkus?

Saya perlu membuat wadah gaya DIV yang berisi beberapa DIV lainnya. Diminta bahwa DIV ini tidak akan membungkus jika jendela browser diubah ukurannya menjadi sempit.

Saya mencoba membuatnya bekerja seperti di bawah ini.

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

Ini bekerja dalam banyak kasus. Namun, dalam beberapa kasus khusus, rendering tidak benar. Saya menemukan wadah DIV berubah menjadi 3000px lebar dalam RTL IE7; dan itu berubah menjadi berantakan.

Apakah ada cara lain untuk membuat wadah DIV untuk tidak membungkus?

Coba gunakan white-space: nowrap;dalam gaya wadah (bukan overflow: hidden;)

Jika saya tidak ingin mendefinisikan lebar minimal karena saya tidak tahu jumlah elemen, satu-satunya hal yang berhasil bagi saya adalah:

display: inline-block;
white-space: nowrap;

Tetapi hanya di Chrome dan Safari: /

Hal berikut ini berfungsi untuk saya tanpa mengambang (saya memodifikasi sedikit contoh Anda untuk efek visual):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

Div dapat dipisahkan dengan spasi. Jika Anda tidak menginginkan ini, gunakan margin-right: -4px;sebagai ganti margin: 5px;untuk .slide(itu jelek tapi ini masalah sulit untuk ditangani ).

Combo yang Anda butuhkan adalah

white-space: nowrap

pada orang tua dan

display: inline-block; // or inline

pada anak-anak

Ini bekerja untuk saya:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

overflow: hiddenharus memberi Anda perilaku yang benar. Dugaan saya adalah itu RTLkacau karena Anda memiliki float: leftdi enkapsulasi div.

Selain bug itu, Anda memiliki perilaku yang benar.

Coba gunakan width: 3000px;untuk kasus IE.

Tidak satu pun di atas bekerja untuk saya.

Dalam kasus saya, saya perlu menambahkan yang berikut ini ke kontrol pengguna yang saya buat:

display:inline-block;

The min-widthproperti tidak bekerja dengan benar di Internet Explorer, yang kemungkinan besar penyebab masalah Anda.

Baca info dan skrip brilian yang memperbaiki banyak masalah IE CSS .

kamu bisa memakai

display: table;

untuk wadah Anda dan karenanya hindari overflow: hidden;. Seharusnya melakukan pekerjaan jika Anda menggunakannya hanya untuk tujuan warpping.

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

Gunakan display:flexdanwhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

The <span>tag digunakan untuk kelompok inline-elemen dalam dokumen.
(sumber)