Широкий div с неограниченной шириной

У меня большая проблема!

Знаете, div по умолчанию width есть 100% (родительского). И если его ширина содержимого превышает 100% (100% = 1440 пикселей), 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! Спасибо...

Ответ 1

Самый простой способ - использовать white-space: nowrap для родителя и display: inline-block для детей:

Смотрите: http://jsfiddle.net/4Yv83/

Я также добавил overflow-x: auto, потому что предположительно вы не хотите этого.

Ответ 2

Просто скажите текст внутри div, чтобы он не обернулся.

div {
  white-space: nowrap;
}

Ответ 3

прошло несколько лет, но... Думаю, было бы лучше перекрыть переполнение в скрытое, потому что нам не нужно сразу показывать все дочерние элементы. мы используем этот вид стиля в компонентах, похожих на большие пальцы. поэтому я предлагаю установить "overflow: hidden" в родительский элемент.

/* for parent element */
overflow: hidden;