CSS问题的X滚动条

Question

CSS：

#exposoures ul{padding:0px;margin:0px;float:left;} 

HTML：

<div id="exposoures" style="width: 100px;height:50px; overflow-x:scroll;overflow-y:hidden; background-color: #ccc;"> 
    <ul> 
     <li>row 1 col 1</li> 
     <li>row 2 col 1</li> 
     <li>row 3 col 1</li> 
    </ul> 
    <ul> 
     <li>row 1 col 1</li> 
     <li>row 2 col 1</li> 
     <li>row 3 col 1</li> 
    </ul> 
    <ul> 
     <li>row 1 col 1</li> 
     <li>row 2 col 1</li> 
     <li>row 3 col 1</li> 
    </ul> 
    <ul> 
     <li>row 1 col 1</li> 
     <li>row 2 col 1</li> 
     <li>row 3 col 1</li> 
    </ul> 
</div> 

这里我上面包含多个ULS现在问题overflow-x:scroll股利。我无法获得滚动条x-axis ..任何人都可以帮我解决这个问题

Answer 1

这是因为单词被封装，所以当它达到宽度限制时，它只是流向下一行，由于overflow-y: hidden规则而被隐藏。

为了避免包装添加white-space:nowrap;到DIV：

#exposoures { white-space:nowrap; } 

活生生的例子：http://jsfiddle.net/PqR5x/1/