我有一个具有以下样式的 div:
height:200px;
overflow-x:scroll;
overflow-y:hidden;
width:682px;
我需要元素在一行上彼此相邻,并且只有水平滚动。 里面的元素有以下样式:
width:60px;
padding:10px;
float:left;
但是当它们到达父 div 的末尾时,它们开始新的一行,而水平滚动条保持空白。有什么想法我做错了什么以及如何解决吗?
P.S 所有元素都是 div-s。
提前致谢!
最佳答案
请注意,负责实际滚动的包装器 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>
关于html - 仅具有水平滚动的 Div 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7893417/