Html 水平滚动css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19256982/
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
Horizontal scroll css?
提问by Miomir Dancevic
I want to have one <div>with id that has horizontal scroll, but the problem is it has to be responsive, not with fixed width.
我想要一个<div>带有水平滚动的 id，但问题是它必须具有响应性，而不是固定宽度。
html, body {margin: 0; padding: 0;}
#myWorkContent{
width:530px;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#myWorkContent a {
display: inline-block;
vertical-align: middle;
}
#myWorkContent img {border: 0;}
<div id="myWorkContent">
<a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
<a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a>
<a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a>
<a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a>
<a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a>
<a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
</div><!-- end myWorkContent -->
Thanks to http://jsfiddle.net/clairesuzy/FPBWr/
感谢http://jsfiddle.net/clairesuzy/FPBWr/
The problem is with that 530px. I would like to use 100% instead. But then I got page scroll and scroll of the DIV goes right, can not get it, any idea?
问题在于那个 530px。我想用 100% 代替。但是后来我得到了页面滚动和 DIV 的滚动正确，无法得到它，知道吗？
Here is article in Serbian about solution http://www.blog.play2web.com/index.php?id=18
这是关于解决方案的塞尔维亚语文章 http://www.blog.play2web.com/index.php?id=18
回答by nkmol
Just set your width to auto:
只需将您的宽度设置为自动：
#myWorkContent{
width: auto;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
This way your div can be as wide as possible, so you can add as many kitty images as possible ;3
这样你的 div 就可以尽可能宽，这样你就可以添加尽可能多的小猫图像；3
Your div's width will expand based on the child elements it contains.
您的 div 的宽度将根据它包含的子元素扩展。
回答by Manohar Reddy Poreddy
Below worked for me.
下面为我工作。
Height & width are taken to show that, if you 2 such children, it will scroll horizontally, since height of child is greater than height of parent scroll vertically.
高度和宽度用于表明，如果您有 2 个这样的孩子，它将水平滚动，因为孩子的高度大于垂直滚动的父级的高度。
Parent CSS:
父 CSS：
.divParentClass {
width: 200px;
height: 100px;
overflow: scroll;
white-space: nowrap;
}
Children CSS:
儿童 CSS：
.divChildClass {
width: 110px;
height: 200px;
display: inline-block;
}
To scroll horizontally only:
仅水平滚动：
overflow-x: scroll;
overflow-y: hidden;
To scroll vertically only:
仅垂直滚动：
overflow-x: hidden;
overflow-y: scroll;
回答by Giovanni Silveira
Just make sure you add box-sizing:border-box;to your #myWorkContent.
只要确保你添加box-sizing:border-box;到你的#myWorkContent.
回答by user1
use max-width instead of width
使用最大宽度而不是宽度
max-width:530px;
max-width:530px;
回答by user3662981
I figured it this way:
我是这样想的：
* { padding: 0; margin: 0 }
body { height: 100%; white-space: nowrap }
html { height: 100% }
.red { background: red }
.blue { background: blue }
.yellow { background: yellow }
.header { width: 100%; height: 10%; position: fixed }
.wrapper { width: 1000%; height: 100%; background: green }
.page { width: 10%; height: 100%; float: left }
<div class="header red"></div>
<div class="wrapper">
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
</div>
I have the wrapper at 1000% and ten pages at 10% each. I set mine up to still have "pages" with each being 100% of the window (color coded). You can do eight pages with an 800% wrapper. I guess you can leave out the colors and have on continues page. I also set up a fixed header, but that's not necessary. Hope this helps.
我有 1000% 的包装纸和 10% 的 10 页。我将我的设置为仍然有“页面”，每个页面都是 100% 的窗口（颜色编码）。您可以使用 800% 包装器制作八页。我想你可以省略颜色并在继续页面上显示。我还设置了一个固定的标题，但这不是必需的。希望这可以帮助。
