一个宽度无限宽的div

mrd*_*iri 25 css

我有一个很大的问题!

你知道,div默认width100%(父母的).如果其内容宽度超过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>
Run Code Online (Sandbox Code Playgroud)

注意:我不知道内容宽度.

我试着display: inline;display: inline-block;display: table;.他们没有工作.

注2:我试过了display: -moz-box;.它有效,但仅限于FIREFOX!谢谢 ...

thi*_*dot 41

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

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

我还补充说overflow-x: auto,因为大概你不想要这个.


小智 5

只需告诉 div 内的文本不要换行。

div {
  white-space: nowrap;
}
Run Code Online (Sandbox Code Playgroud)