Question

我有一个具有以下风格的div：

height:200px;
overflow-x:scroll;
overflow-y:hidden;
width:682px;

我需要元素在一行上彼此相邻，只有水平滚动。里面的元素有以下样式：

width:60px;
padding:10px;
float:left;

但是当它们到达父div的末尾时，它们从一个新行开始，而水平滚动保持空白。我有什么想法，我做错了什么以及如何解决它？

P.S所有元素都是div-s。

提前谢谢！

Answer 1

参考：http://jsfiddle.net/pz9AP/

注意，负责实际滚动的包装器div。包含的项目将在容器元素中浮动，而容器元素又将在包装器内滚动。

#wrapper {
    height: 200px;
    width: 682px;
    overflow-x:scroll;
    overflow-y:hidden; 
}

#container{
    width:2000px;  
}

.item{
    width:60px;
    padding:10px;
    float:left;
}

<div id="wrapper">
<div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
</div>
</div>

Div水平滚动只能不起作用

1 个答案: