Css - отображение изображений с горизонтальной полосой прокрутки

Я пытаюсь отобразить ряд изображений по горизонтали внутри 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>

Ответы

Ответ 1

Вам нужно будет отобразить элементы списка в строке или поместить их и дать ul очень большую ширину, чтобы избежать перемещения элементов на следующую строку:

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

Ответ 2

Правильный код для произвольного количества изображений, если вы не знаете ширину 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>

Ответ 3

Я бы пошел с

div#lasteventimg ul li {
  display: inline;
}

Чтобы элементы li не отображались как элементы блока.

Ответ 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>

Ответ 5

Вам нужно изменить свой список, чтобы элементы отображались горизонтально, а не по умолчанию.

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

Ответ 6

Почему бы вам не попробовать это?

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

li 
{
   display: block;
   float:left;
}