только горизонтальная прокрутка!

Question

У меня есть, которое содержит горизонтальное меню. меню состоит из неупорядоченного списка. я хотел бы, чтобы div получал горизонтальную прокрутку всякий раз, когда меню превышает ширину <div>. я попытался использовать эти определения CSS для моего <div>:

position: absolute;
width: 380px;   
overflow: auto;
overflow-y: hidden;
height: 30px;

, но потом понял, что, поскольку меню - это СПИСОК, различные элементы списка разбивают строку всякий раз, когда они достигают ширины <div>, и переходят к следующей строке, поэтому браузер не видит необходимости в горизонтальной прокрутке он также не отображает вертикальный из-за строки overflow-y: hidden;)

есть идеи, как мне создать 1-строчное горизонтальное меню, которое будет прокручиваться только по горизонтали?

Большое вам спасибо.

Answer 1

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

Для вашего div, попробуйте:

white-space: nowrap;

Answer 2

Насколько я знаю, для этого не существует обходного пути на основе CSS. Тем не менее, вы можете использовать Jquery для ее решения.

Я сделал небольшой тест для вас, чтобы увидеть:

http://sotkra.com/stackoverflow/cssdilemma/cssdilemma.html

В первом примере 6 или около того li, которые превышают ширину контейнера div, что означает, что вам НЕ нужна полоса прокрутки.

Во втором примере есть 8-9 li, которые превышают ширину контейнера div, что означает, что вам НУЖНА полоса прокрутки.

По сути, вы используете Jquery для подсчета количества li внутри вашего div, используя size (). Если они превышают число X, в моем примере 6 (требуется ограничение до прокрутки), то к ul добавляется класс, чтобы увеличить его ширину (.longer), чтобы не было разрыва строки и появилась горизонтальная полоса прокрутки. *

Также добавлен еще один класс (.taller), который увеличивает высоту для размещения самой полосы прокрутки.

Приветствие G.Campos

Answer 3

Вам нужно поместить один массивный горизонтальный div внутри родительского div с переполнением: auto; Это позволит

плавать влево без переноса на следующую строку и будет прокручиваться только при пересечении границы родительского div.