css - 使用水平滚动条显示图像

Question

我试图在固定宽度的div内水平显示许多图像.我想使用水平滚动条来显示不适合div内部的图像.

但是,图像垂直显示,而不是水平显示.有没有办法迫使它们并排显示？

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>  

Answer 1

如果您不知道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>

Answer 2

您必须显示列表项内联或浮动它们并给ul一个非常大的宽度,以避免项目移动到下一行:

ul {
  width: 10000px;    // for example
  white-space: nowrap;
}
li {
  float: left:
  // or
  display: inline;
}