如何使DIV不包装？
我需要创build一个包含多个其他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>
这对我工作：
.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应该给你正确的行为。 我的猜测是RTL被搞乱了，因为你有float: left在被封装的div 。
除了那个bug之外，你有正确的行为。
你需要的组合是
white-space: nowrap
在父母和
display: inline-block; // or inline
对孩子
尝试使用width: 3000px; 为IE的情况下。
以上都没有为我工作。
就我而言，我需要将以下内容添加到我创build的用户控件中：
display:inline-block;
min-width属性在Internet Explorer中无法正常工作，这很可能是您的问题的原因。
阅读信息和一个辉煌的脚本，修复了许多IE CSS问题 。
您可以使用
display: table;
为您的容器，并因此避免overflow: hidden; 。 如果你只是为了扭曲目的而使用它，它应该做这个工作。
<span>标签用于对文档中的内嵌元素进行分组。
（资源）
