如何使用溢出水平滚动？

Question

我遇到这种情况：

<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

的测试

任何想法？

感谢。

修改。我需要在设定宽度上看到滚动条

Answer 1

您必须将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

Answer 2

我认为这就是你要找的东西：

编辑：用text-wrap:none;替换white-space:nowrap;

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

这是展示水平滚动的jsFiddle。