Html 仅具有水平滚动的 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/443700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div with horizontal scrolling only
提问by Richard Ev
I have a fixed width DIV containing a table with many columns, and need to allow the user to scroll the table horizontally within the DIV.
我有一个固定宽度的 DIV，其中包含一个包含多列的表格，并且需要允许用户在 DIV 内水平滚动表格。
This needs to work on IE6 and IE7 only (internal client application).
这仅需要在 IE6 和 IE7（内部客户端应用程序）上工作。
The following works in IE7:
以下在 IE7 中有效：
overflow-x: scroll;
Can anyone help with a solution that works in IE6 as well?
任何人都可以帮助解决也适用于 IE6 的解决方案吗？
回答by Sampson
The solution is fairly straight forward. To ensure that we don't impact the width of the cells in the table, we'll turn off white-space. To ensure we get a horizontal scroll bar, we'll turn on overflow-x. And that's pretty much it:
解决方案相当简单。为了确保我们不会影响表格中单元格的宽度，我们将关闭white-space。为了确保我们得到一个水平滚动条，我们将打开overflow-x。差不多就是这样：
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
You can see the end-result here, or in the animation below. If the table determines the height of your container, you should not need to explicitly set overflow-yto hidden. But understand that is also an option.
您可以在此处或在下面的动画中看到最终结果。如果表格确定了容器的高度，则不需要显式设置overflow-y为hidden。但要明白这也是一种选择。
回答by W.K.S
I couldn't get the selected answer to work but after a bit of research, I found that the horizontal scrolling div must have white-space: nowrapin the css.
我无法得到选定的答案，但经过一些研究，我发现white-space: nowrapcss 中必须有水平滚动 div 。
Here's complete working code:
这是完整的工作代码：
<!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>
回答by Diodeus - James MacFarlane
overflow-x: scroll;
overflow-y: hidden;
EDIT:
编辑：
It works for me:
这个对我有用：
<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
<div style='width:400px;height:250px'></div>
</div>
回答by ankitd
For horizontal scroll, keep these two properties in mind:
对于水平滚动，请记住以下两个属性：
overflow-x:scroll;
white-space: nowrap;
See working link : click me
查看工作链接：点击我
HTML
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
CSS
div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
回答by oezkany
try this:
尝试这个：
HTML:
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:
CSS：
.container {
width: 200px;
height: 100px;
display: flex;
overflow-x: auto;
}
.item {
width: 100px;
flex-shrink: 0;
height: 100px;
}
The white-space: nowrap; property dont let you wrap text. Just see here for an example: https://codepen.io/oezkany/pen/YoVgYK
空白：nowrap；属性不允许您换行文本。请参阅此处的示例：https: //codepen.io/oezkany/pen/YoVgYK
