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

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

21 голосов
/ 14 марта 2012

У меня есть такой список: 

<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 заставить все элементы списка быть в одной строке, чтобы я мог использовать горизонтальную прокрутку? Прямо сейчас, если я установлю переполнение: авто Я получаю только вертикальные полосы прокрутки, которые мне не нужны.

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

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

Ответы [ 5 ]

53 голосов
/ 14 марта 2012

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

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

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

jsFiddle Примеры:

34 голосов
/ 14 марта 2012

Вот рабочая скрипка: http://jsfiddle.net/qnYb5/

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

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

li{
    display:inline;
}
2 голосов
/ 14 марта 2012

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

1 голос
/ 14 марта 2012

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

Возьмите с собой здесь .

1 голос
/ 14 марта 2012

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

...