Как заставить горизонтальную прокрутку в HTML-списке с помощью CSS?

У меня есть список вроде этого:

<div>
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
   </ul>
 </div>

и следующий CSS:

ul { 
     width: 160px;
     height: 100px;
     overflow: auto; 
     }
li { 
     width: 80px;
     display: inline-block;
     float: left 
     }

Я пытаюсь заставить элементы списка отображать слева направо, то есть

 one - two - three - four

Моя проблема:
Выполнение этого, как это, дает мне две строки по два элемента.

Вопрос:
Есть ли способ CSS, чтобы заставить элементы списка быть в одной строке, чтобы я мог использовать горизонтальную прокрутку? Прямо сейчас, если я устанавливаю переполнение: auto, я получаю только вертикальные полосы прокрутки, которые мне не нужны.

Я не хочу устанавливать это на обертке div. Мне просто интересно, есть ли решение CSS, которое я могу использовать только в списке.

Спасибо за помощь!

Ответ 1

Вы не можете пролистать плавающий контент. После его размещения он не вычисляется по ширине или высоте родительского контейнера по умолчанию. Действительно, <ul> просто расширяется до своей ширины набора, а затем ничего не делает.

Удаление float: left сделает их прокручиваемыми. Единственная проблема, с которой вы столкнетесь, заключается в том, что между каждым встроенным блоком есть дополнительное "пространство". Вы можете удалить это, удалив разрывы строк между каждым элементом списка. Это не самая красивая вещь. Обычно я использую font-size: 0, а затем reset размер шрифта в элементе списка.

Вам также необходимо убедиться, что элементы не переносятся на новую строку, когда они попадают в ширину элемента.

Примеры jsFiddle:

Ответ 2

Здесь рабочая скрипка: http://jsfiddle.net/qnYb5/

Соответствующий CSS:

ul{
    list-style-type:none;
    white-space:nowrap;
    overflow-x:auto;
}

li{
    display:inline;
}

Ответ 3

Вы не ограничили высоту <ul>, поэтому браузер может обернуть "дополнительные" элементы на свою собственную строку. Вам понадобится height: 1em или что-то еще, чтобы убедиться, что <ul> не может стать выше, заставляя все прокручивать по горизонтали.

Ответ 4

Вы можете сделать это с помощью css + javascript, например. (Http://www.smoothdivscroll.com/v1-2.htm). Не думайте, что есть только CSS-only sulution (который будет работать в кросс-браузере).

Ответ 5

Используйте overflow-x: scroll; в div.

Погасите его здесь.