Comment faire en sorte qu'un DIV ne soit pas enveloppé?

J'ai besoin de créer un style DIV contenant plusieurs autres DIV. Il est demandé que ces DIV ne s'enroulent pas si la fenêtre du navigateur est redimensionnée pour être étroite.

J'ai essayé de le faire fonctionner comme ci-dessous.

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

Cela fonctionne dans la plupart des cas. Cependant, dans certains cas particuliers, le rendu est incorrect. J'ai trouvé que le conteneur DIV passait à 3000px de largeur dans RTL de IE7; et cela s'avère compliqué.

Existe-t-il un autre moyen de ne pas emballer un conteneur DIV?

Essayez d'utiliser white-space: nowrap;dans le style conteneur (au lieu de overflow: hidden;)

Si je ne veux pas définir une largeur minimale parce que je ne connais pas la quantité d'éléments, la seule chose qui a fonctionné pour moi était:

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

Mais uniquement dans Chrome et Safari: /

Ce qui suit a fonctionné pour moi sans flotter (j'ai modifié un peu votre exemple pour un effet visuel):

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

Les div peuvent être séparés par des espaces. Si vous ne voulez pas cela, utilisez à la margin-right: -4px;place de margin: 5px;for .slide(c'est moche mais c'est un problème délicat à résoudre ).

Le combo dont vous avez besoin est

white-space: nowrap

sur le parent et

display: inline-block; // or inline

sur les enfants

Cela a fonctionné pour moi:

.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: hiddendevrait vous donner le bon comportement. Je suppose que RTLc'est foiré parce que vous avez float: leftsur le par div.

En plus de ce bug, vous avez le bon comportement.

Essayez d'utiliser width: 3000px;pour le cas d'IE.

Aucune de ces réponses n'a fonctionné pour moi.

Dans mon cas, j'avais besoin d'ajouter ce qui suit au contrôle utilisateur que j'avais créé:

display:inline-block;

La min-widthpropriété ne fonctionne pas correctement dans Internet Explorer, ce qui est probablement la cause de vos problèmes.

Lisez des informations et un script brillant qui corrige de nombreux problèmes CSS IE .

vous pouvez utiliser

display: table;

pour votre conteneur et donc éviter le overflow: hidden;. Il devrait faire le travail si vous l'avez utilisé uniquement à des fins de déformation.

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

Utiliser display:flexetwhite-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>

La <span>balise est utilisée pour regrouper des éléments en ligne dans un document.
(la source)