水平滚动Div只能工作 [英] Div with horizontal scrolling only not working

问题描述

我有一个div，风格如下：

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

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

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

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

PS所有元素都是div-s。

预先感谢您！

/jsfiddle.net/pz9AP/rel =noreferrer> 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> 
  

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!

解决方案

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>

这篇关于水平滚动Div只能工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！