Div只有水平滚动
我有一个固定宽度的DIV包含一个有很多列的表,并且需要允许用户在DIV内水平滚动表格。
这只需要在IE6和IE7上工作(内部客户端应用程序)。
以下在IE7中的作品:
overflow-x: scroll;
任何人都可以帮助一个解决scheme,在IE6以及?
解决scheme非常简单。 为了确保我们不影响表格单元格的宽度,我们将closures空格 。 为了确保我们得到一个水平滚动条,我们将打开overflow-x 。 这几乎是:
.container { width: 30em; overflow-x: auto; white-space: nowrap; }
您可以在这里或下面的animation中看到最终结果 。 如果表格确定了容器的高度,则不需要明确地将overflow-y
设置为hidden
。 但明白这也是一个select。
我不能得到选定的答案工作,但经过一些研究后 ,我发现横向滚动div必须有white-space: nowrap
在CSS的white-space: nowrap
。
这是完整的工作代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Something</title> <style type="text/css"> #scrolly{ width: 1000px; height: 190px; overflow: auto; overflow-y: hidden; margin: 0 auto; white-space: nowrap } img{ width: 300px; height: 150px; margin: 20px 10px; display: inline; } </style> </head> <body> <div id='scrolly'> <img src='img/car.jpg'></img> <img src='img/car.jpg'></img> <img src='img/car.jpg'></img> <img src='img/car.jpg'></img> <img src='img/car.jpg'></img> <img src='img/car.jpg'></img> </div> </body> </html>
overflow-x: scroll; overflow-y: hidden;
编辑:
这个对我有用:
<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'> <div style='width:400px;height:250px'></div> </div>
对于横向滚动,记住这两个属性:
overflow-x:scroll; white-space: nowrap;
查看工作链接: 点击我
HTML
<p>overflow:scroll</p> <div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
CSS
div.scroll { background-color:#00FFFF; height:40px; overflow-x:scroll; white-space: nowrap; }