如何使一个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>

这在大多数情况下都有效。然而，在某些特殊情况下，呈现是不正确的。我发现在IE7的RTL中，容器DIV的宽度更改为3000px;结果变得很混乱。

是否有其他方法使容器DIV不包装?

404764 次浏览
小开

overflow: hidden应该给你正确的行为。我的猜测是，RTL是混乱的，因为你在封装的__abc3上有float: left。

除了那个虫子，你的行为还不错。

小开

min-width属性在Internet Explorer中不能正确工作，这很可能是您的问题的原因。

读取信息和 一个出色的脚本，修复了许多IE CSS问题 . < / p >

小开

尝试在容器样式中使用white-space: nowrap;(而不是overflow: hidden;)

小开

尝试在IE的情况下使用width: 3000px;。

小开

如果我不想定义一个最小宽度，因为我不知道元素的数量，唯一对我有用的是:

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;来表示.slide(它很丑，但是这是个棘手的问题)。

小开

你可以使用

display: table;

，因此避免使用overflow: hidden;。如果你只是为了扭曲而使用它，它应该能起作用。

小开

以上这些方法对我都没用。

在我的例子中，我需要向我创建的用户控件添加以下内容:

display:inline-block;
小开

<span>标记用于对文档中的内联元素进行分组 (源) < / p >

小开

这招对我很管用:

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

小开

你需要的组合是

white-space: nowrap

在父和

display: inline-block; // or inline

关于孩子们

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


提交答案