如何使DIV不包裹？

我需要创建一个包含多个其他DIV的容器DIV样式。要求如果将浏览器窗口调整为窄尺寸，则这些DIV将不会自动换行。

我试图使其工作如下。

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

在大多数情况下，这是可行的。但是，在某些特殊情况下，渲染是不正确的。我发现容器DIV在IE7的RTL中更改为3000px宽度；变得混乱了。

还有其他方法可以使容器DIV不包装吗？

尝试使用white-space: nowrap;容器样式（而不是overflow: hidden;）

如果由于我不知道元素数量而不想定义最小宽度，那么对我有用的唯一事情就是：

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

但仅在Chrome和Safari中：/

以下内容对我有效，没有浮动（为视觉效果我对示例进行了一些修改）：

.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可以用空格分隔。如果您不希望这样做，请使用margin-right: -4px;代替margin: 5px;for .slide（这很丑陋，但这是一个棘手的问题）。

您需要的组合是

white-space: nowrap

在父母和

display: inline-block; // or inline

对孩子们

这对我有用：

.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: hidden应该给你正确的行为。我的猜测是，RTL因为您已经float: left封装了divs ，所以很混乱。

除了该错误，您还有正确的行为。

尝试width: 3000px;用于IE的情况。

以上都不对我有用。

就我而言，我需要将以下内容添加到我创建的用户控件中：

display:inline-block;

该min-width属性在Internet Explorer中无法正常工作，这很可能是造成问题的原因。

阅读信息和 解决许多IE CSS问题的出色脚本。

您可以使用

display: table;

为您的容器，因此避免使用overflow: hidden;。如果仅将其用于变形目的，则它应该可以完成这项工作。

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

使用display:flex和white-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>

所述<span>标签用于一个文件中组直列元件。
（资源）