如何让DIV不包裹？

Question

我需要创建一个包含多个其他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不包装？

Answer 1

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

Answer 2

您可以使用

display: table;

为您的容器和其他避免overflow: hidden;。如果您仅将其用于翘曲目的，它应该可以完成这项工作。

Answer 3

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

Answer 4

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

Answer 5

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

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

但仅限Chrome和Safari：/

Answer 6

以下为我工作没有浮动（我修改了你的例子有点视觉效果）：

.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（它很丑，但是it's a tricky problem to deal with）。

Answer 7

你需要的组合是

white-space: nowrap

在父母和

display: inline-block; // or inline

对孩子们

Answer 8

这对我有用：

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

Answer 9

overflow: hidden应该给你正确的行为。我的猜测是RTL搞砸了，因为你在封装的float: lefts上有div。

除了那个bug，你得到了正确的行为。

Answer 10

尝试使用width: 3000px;作为IE的情况。

Answer 11

以上都不适合我。

在我的情况下，我需要将以下内容添加到我创建的用户控件中：

display:inline-block;

Answer 12

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

阅读info和a brilliant script that fixes many IE CSS problems。