我有一个具有以下样式的 div:
height:200px;
overflow-x:scroll;
overflow-y:hidden;
width:682px;
我需要元素在一行上彼此相邻,仅水平滚动。
里面的元素有以下样式:
width:60px;
padding:10px;
float:left;
但是,当它们到达父 div 的末尾时,它们会从新行开始,而水平滚动保持空白。有什么想法我做错了什么以及如何解决它吗?
P.S 所有元素都是 div-s。
先感谢您!
参考见:http://jsfiddle.net/pz9AP/ 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)