I am attempting to alter the default scrolling behavior of li elements from vertical to horizontal in HTML. I have successfully achieved this, but the output displays a succession of lists in a line, followed by another list below it. However, I desire to have all the lists displayed in a single line, regardless of the number of li elements.
Here is the HTML code:
<div class="imageGallery">
<ul>
<li><img src="img01.png"/></li>
<li><img src="img02.png"/></li>
<li><img src="img03.png"/></li>
<li><img src="img04.png"/></li>
.....
.....
</ul>
</div>
CSS code:
.imageGallery {
overflow-x: scroll;
overflow-y: hidden;
}
ul {
width: 1500px;
margin: 0;
padding: 0;
}
The current output displays a horizontal scrollbar with lists of images in a line, followed by another list below it. How can I modify it to display all lists in a single line?
Thank you all for your assistance.