css - 显示带有水平滚动条的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1399455/
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 - Displaying images with horizontal scroll bar
提问by Dan
I'm trying to display a number of images horizontally inside of a fixed-width div. I would like to use a horizontal scroll bar to display the images which do not fit inside the div.
我正在尝试在固定宽度的 div 内水平显示许多图像。我想使用水平滚动条来显示不适合 div 的图像。
However, the images are displaying vertically, rather than horizontally. Is there a way to force them to display side-by-side?
但是，图像是垂直显示的，而不是水平显示的。有没有办法强制它们并排显示？
div#event {
width: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
div#event ul { list-style: none; }
div#event img {
width: 100px;
float: left;
}
<div id="lasteventimg">
<ul><li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
</ul>
</div>
采纳答案by jeroen
You will have to display the list items inline or float them and give the ul a very large width to avoid items moving to the next line:
您必须内联显示列表项或浮动它们并给 ul 一个非常大的宽度以避免项目移动到下一行：
ul {
width: 10000px; // for example
white-space: nowrap;
}
li {
float: left:
// or
display: inline;
}
回答by dneprforum
Correct code for arbitrary number of images, if you don't know ul width:
任意数量图像的正确代码，如果您不知道 ul 宽度：
#lasteventimg {width:150px;overflow-x:scroll;overflow-y:hidden;}
ul {list-style:none; display:block;white-space:nowrap;}
li {width: 100px;display:inline;}
<div id="lasteventimg">
<ul>
<li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
<li><img src="./gfx/gallery/image4.jpg" /></li>
<li><img src="./gfx/gallery/image5.jpg" /></li>
</ul>
</div>
回答by Welbog
I'd go with
我愿意
div#lasteventimg ul li {
display: inline;
}
To make sure the lielements aren't rendered as block elements.
确保li元素不会呈现为块元素。
回答by Donut
Well first of all, you need to change your styles from #eventto #lasteventimg. Then, if you set the widthof the ulto be wide enough to accommodate all the images, you should see the behavior that you're trying to get:
首先，您需要将样式从 更改#event为#lasteventimg。然后，如果你设置width的ul要宽，足以容纳所有的图片，也应该看到，你正在试图获得的行为：
div#lasteventimg {
width: 150px;
overflow-x: scroll;
overflow-y: hidden;
}
div#lasteventimg ul { list-style: none; width: 300px; }
div#lasteventimg img {
width: 100px;
float: left;
}
<div id="lasteventimg">
<ul><li><img src="./gfx/gallery/image1.jpg" /></li>
<li><img src="./gfx/gallery/image2.jpg" /></li>
<li><img src="./gfx/gallery/image3.jpg" /></li>
</ul>
</div>
回答by Dominic Bou-Samra
You need to change your list, so the elements are rendered horizontally rather then the default vertical.
您需要更改列表，以便元素水平呈现而不是默认垂直呈现。
#imagelist li
{
display: inline;
list-style-type: none;
}
回答by Ramesh
Why don't you try this?
你为什么不试试这个？
ul
{
width: 10000px;
white-space: nowrap;
}
li
{
display: block;
float:left;
}
