我试图在固定宽度的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>
解决方法
您将不得不将列表项列入或浮动,并给予一个非常大的宽度,以避免物品移动到下一行：
ul {
width: 10000px; // for example
white-space: nowrap;
}
li {
float: left:
// or
display: inline;
}
