一个宽度无限宽的div

Question

我有一个大问题！

您知道，div默认width是100%（父级的）。如果其内容宽度超过100％（100％= 1440px），则div会以多行显示内容。

现在，如果我想，div将其内容显示在一行中，我该怎么办？看一下简单的代码::

<div>
    <div>aaa</div>
    <div>bbb</div>
    <div>ccc</div>
    <div>ddd</div>
    ......(more than 100 other div, with unknown width)
</div>

注意：我不知道内容宽度。

我尝试了display: inline;和display: inline-block;以及display: table;。他们没有工作。

注意2：我尝试了display: -moz-box;。它有效，但仅限于FIREFOX！ 谢谢......

Answer 1

最简单的方法是在父级上使用white-space: nowrap，在子级上使用display: inline-block：

请参阅： http://jsfiddle.net/4Yv83/

我还添加了overflow-x: auto，因为大概是don't want this。

Answer 2

告诉div里面的文字不要换行。

div {
  white-space: nowrap;
}

Answer 3

几年过去了但是......我认为最好将overflow设置为hidden，因为我们不需要一次显示所有子元素。我们在拇指滑动组件中使用这种样式。所以我建议将“overflow：hidden”设置为父元素。

/* for parent element */
overflow: hidden;