力横向扩张

Question

对于排序缩略图横向滑动观众的

我怎样才能使水平滚动的div里面的div强制滚动DIV水平，而不是到达终点，并开始一个新的生产线？

我已经使用float：left和display：inline-block，但它们到达它们的容器的末端并创建一个新行，而不是强制容器水平展开以适合它们，从而迫使需要水平滚动条

所以DIV盒是力做到这一点：的

[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ] 
     <---->scroll 

代替：

[ ][ ][ ][ ] 
[ ][ ][ ][ ] 

代码：

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;"> 
    <div style="width: auto;"> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
    <div> 
</div> 


.box{ 
    width: 100px; 
    height: 100px; 
    border: solid 1px black; 
    float:left; 
    display: inline-block; 
} 

Answer 1

你不需要float和display:inline-block，和花车也不会做..所以你必须删除浮动规则，（为IE7及以下添加解决方法*） - 当存在float浏览器忽略display属性

.box{ 
    width: 100px; 
    height: 100px; 
    border: solid 1px black; 
    display: inline-block; 
} 

.box {display: inline !ie7;} /* to make it work in IE7 and below */ 

与white-space: nowrap关于内部分区

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;"> 
    <div style="width: auto; white-space: nowrap"> 
etc.. 

Answer 2

试试这个：

<div style="width: 200px; height: 100px; overflow: scroll; white-space: nowrap"> 
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO 
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO 
    <span id="a1">BAR!</span> 
    FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO 
</div> 
<a href="#a1">scroll to bar (HTML anchor)</a> 
<input type="button" value="scroll to bar (JS scrollIntoView)" /> 
<input type="button" value="scroll to bar (JS scrollLeft)" /> 

<script type="text/javascript"> 
    var a1= document.getElementById('a1'); 
    var buttons= document.getElementsByTagName('input'); 

    buttons[0].onclick= function() { 
     a1.scrollIntoView(); 
    }; 
    buttons[1].onclick= function() { 
     a1.parentNode.scrollLeft= a1.offsetLeft; 
    }; 
</script> 

link