宽无限宽的div [英] a wide div with unlimited width

问题描述

我有一个大问题！

你知道， div width 是 100％（父级）。如果其内容宽度超过100％（100％= 1440像素），则 div 会以乘法行显示内容。

You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.

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

Now, if i want, the div shows its content in one line, what should I do? look at the simple code::

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

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

NOTE: I don't know the content width.

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

I tried display: inline; and display: inline-block; and display: table;. they didn't work.

注意2：我尝试了 display：-moz-box; 。它的工作，但只有在FIREFOX！
感谢...

NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX! Thanks ...

推荐答案

最简单的方法是使用white-space：nowrap 和 display：inline-块：

The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:

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

我也添加了 overflow-x：auto ，因为大概你不想要这个。

I also added overflow-x: auto, because presumably you don't want this.

这篇关于宽无限宽的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！