Как использовать переполнение для горизонтальной прокрутки? - PullRequest
0 голосов
/ 04 ноября 2011

у меня такая ситуация:

<ul class="a1">
<li class="q1"></li>
<li class="q1"></li>
<li class="q1"></li>
<li class="q1"></li>
<li class="q1"></li>
<li class="q1"></li>
<li class="q1"></li>
<li class="q1"></li>
<li class="q1"></li>
<li class="q1"></li>
</ul>

.q1{
width: 100px;
height: 250px;
background: red;
margin: 5px;
float: left;
}

.a1{
width: 500px;
height: 250px;
background: grey;
overflow: auto;
}

как я могу сделать это для прокрутки по горизонтали, а не по вертикали.

вот тест на jsfiddle

есть идеи?

спасибо.

редактировать. мне нужно увидеть полосу прокрутки на заданной ширине

Ответы [ 2 ]

1 голос
/ 04 ноября 2011

Я думаю, это то, что вы ищете:

РЕДАКТИРОВАТЬ : заменено text-wrap:none; на white-space:nowrap;

.a1 {
    white-space: nowrap;
    overflow:scroll;
    overflow-y:hidden;
    -ms-overflow-y: hidden; /* IE8 hack */ 
}

Вот jsFiddle , который демонстрирует горизонтальную прокрутку.

1 голос
/ 04 ноября 2011

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

.a1{
    width: 1200px;
    height: 260px;
    background: grey;
    overflow: auto;
}

http://jsfiddle.net/AlienWebguy/t22W2/1/

1200px в ширину = (100px * 10) + (5px * 10) + (5px * 10)

260px в высоту = 250px + 5px + 5px

...