css - 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;
}

Answer 3

我会去

div#lasteventimg ul li {
  display: inline;
}

确保li元素不会呈现为块元素。

Answer 4

首先，您需要将样式从 更改#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>    

Answer 5

您需要更改列表，因此元素水平呈现，而不是默认垂直呈现。

#imagelist li
{
display: inline;
list-style-type: none;
}

Answer 6

你为什么不试试这个？

ul
{
   width: 10000px; 
   white-space: nowrap;
}

li 
{
   display: block;
   float:left;
}