CSS - Affichage d'images avec barre de défilement horizontale

Eh bien d'abord, vous devez modifier vos styles de #Event code> à #lasteventimg code>. Ensuite, si vous définissez la largeur code> du ul code> pour être suffisamment large pour accueillir toutes les images, vous devez voir le comportement que vous essayez d'obtenir:

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>    

Vous devrez afficher les éléments de la liste en ligne ou les flotter et donner à l'UL une très grande largeur pour éviter les éléments se déplaçant à la ligne suivante:

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

Vous devez modifier votre liste, de sorte que les éléments sont rendus horizontalement plutôt que la verticale par défaut.

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

Pourquoi n'essayez-vous pas cela? XXX

Code correct pour le nombre arbitraire d'images, si vous ne connaissez pas la largeur 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>