仅水平滚动的 Div 不起作用

发布于 2024-12-12 04:06:44 字数 346 浏览 0 评论 0原文

我有一个具有以下样式的 div：

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

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

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

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

PS 所有元素都是 div-s。

提前谢谢您！

原文

I have a div with the following style:

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

I need the elements to be next to each other on one line, with a horizontal scroll only.
The elements inside have the following styles:

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

But when they reach the end of the parent div, they start on a new row, while the horizontal scroll stays blank. Any ideas what am I doing wrong and how to fix it?

P.S All elements are div-s.

Thank you in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长伴 2024-12-19 04:06:44

参考： 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>

For reference see: http://jsfiddle.net/pz9AP/

Note, the wrapper div that is responsible for the actual scrolling. The contained items will float within the container element which in turn will scroll inside the wrapper.

#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>

回复收藏 0 原文

~没有更多了~