我需要创建一个包含多个其他 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>
这在大多数情况下都有效。但是，在某些特殊情况下，渲染是不正确的。我在IE7的RTL中发现容器DIV更改为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>overflow: hidden应该给你正确的行为。我的猜测是因为你在封装的 s上RTL搞砸了。float: leftdiv
除了那个错误，你得到了正确的行为。
使用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>尝试width: 3000px;用于IE的情况。
以上都不适合我。
就我而言，我需要将以下内容添加到我创建的用户控件中：
display:inline-block;
该min-width属性在 Internet Explorer 中无法正常工作，这很可能是您的问题的原因。
您可以使用
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>
标签用于对文档中的<span>内联元素进行分组。
（资源）