Html CSS 水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9925754/
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
CSS horizontal scroll
提问by Simon R
I'm trying to create a <div>with a series of photos which are horizontally scrollable only.
我正在尝试创建<div>一系列只能水平滚动的照片。
It should look something like this LINK;
它应该看起来像这个LINK;
However the above is only achieved by specifying a width for the <div>which contains the photos (so they don't 'word-wrap'). If I don't put a width - it looks like this;LINK
但是，上述只能通过为<div>包含照片的 指定宽度来实现（因此它们不会“自动换行”）。如果我不放宽度 - 它看起来像这样；关联
What can I do using CSS to prevent putting in a fixed width as the images may vary.
由于图像可能会有所不同，我可以使用 CSS 做什么来防止放入固定宽度。
Thanks
谢谢
回答by sandeep
You can use display:inline-blockwith white-space:nowrap. Write like this:
您可以display:inline-block与white-space:nowrap. 像这样写：
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 50px;
cursor: pointer;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
}
Check this http://jsfiddle.net/YbrX3/
回答by vicky
check this link here i change display:inline-block http://cssdesk.com/gUGBH
在此处检查此链接我更改显示：inline-block http://cssdesk.com/gUGBH
回答by FrameWorker
Use this code to generate horizontal scrolling blocks contents. I got this from here http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html
使用此代码生成水平滚动块内容。我从这里得到这个http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
回答by Subroto
try using table structure, it's more back compatible. Check this outHorizontal Scrolling using Tables
