HTML, переполнение: прокрутка и плавание

Question

У меня есть div, который инкапсулирует множество неупорядоченных списков (ul).У меня каждый ul установлен на "float: left".И у меня также есть родительский div, который содержит их, установленный в «overflow-x: scroll».Происходит то, что ul оборачиваются, когда достигают края страницы, и не остаются рядом, чтобы воспользоваться преимуществом свойства прокрутки родительского div (полосы прокрутки есть).Зачем?Как я могу это исправить?

Спасибо за любую помощь.

Answer 1

Вы можете настроить отображение элементов списка: inline-block, а затем использовать пробел: nowrap.Работает в большинстве современных браузеров.

http://jsfiddle.net/gAGKh/22/

Answer 2

вам нужно вставить эти ULS в другой div, которому вы дадите width = [width of ul] * [number of uls]
http://jsfiddle.net/seler/gAGKh/ или посчитайте общую ширину улс http://jsfiddle.net/seler/gAGKh/1/

Answer 3

Поскольку вы передали UL, они больше не существуют в потоке документов, поэтому они не будут расширять родительский div (отсюда и перенос).

Попробуйте установить явную ширину родительского div, которая позволяет всем им существовать рядом.

ТАКЖЕ, если вы не очищаете UL в родительском div, то вы, скорее всего, тоже столкнетесь там с проблемами, вертикальными. Убедитесь, что вы очистили свои поплавки:)

Answer 4

Вам необходимо:

1. Сделать <li> также плавающим.
2. Установить фиксированную ширину для каждого <ul>.
3. Установить фиксированную ширину длясодержит <div>, достаточно для хранения всех списков.

Например:

ul { width: 250px; }
li { margin-left: 5px; }
ul, li { float: left;  }
div { overflow-x: scroll; width: 750px; }

Контрольный пример .