只有水平滚动的Div
我有一个固定宽度的DIV包含一个包含许多列的表,并且需要允许用户在DIV中水平滚动表.
这需要仅适用于IE6和IE7(内部客户端应用程序).
以下适用于IE7:
overflow-x: scroll;
任何人都可以帮助解决在IE6中工作的解决方案吗？
Sam*_*son 160
解决方案相当直接.为了确保我们不影响表格中单元格的宽度,我们将关闭空白区域.为了确保我们得到一个水平滚动条,我们将打开overflow-x.这就是它:
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
您可以在此处或在下面的动画中查看最终结果.如果表确定容器的高度,则不需要显式设置overflow-y为hidden.但要明白,这也是一种选择.
- 如果一张图片胜过千言万语,那么gif值一百万. (4认同)
- 我错过了`white-space:nowrap;`.奇迹般有效! (2认同)
W.K*_*K.S 66
我无法得到选定的答案,但经过一些研究后,我发现水平滚动div必须white-space: nowrap在css中.
这是完整的工作代码:
<!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>
- 此处的“white-space: nowrap”建议似乎已融入正确答案中。+1 用于改进已接受的答案。 (2认同)
Dio*_*ane 21
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>
ank*_*itd 17
对于水平滚动,请记住以下两个属性:
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;
}
尝试这个：
HTML：
<div class="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>
CSS：
.container {
width: 200px;
height: 100px;
display: flex;
overflow-x: auto;
}
.item {
width: 100px;
flex-shrink: 0;
height: 100px;
}
空白：nowrap；属性不允许您换行文本。请参阅此处的示例：https : //codepen.io/oezkany/pen/YoVgYK
- 对我来说是 flex-shrink:0; (2认同)