Currently, I am facing an issue with a horizontal list that consists of li elements. The li elements are 200px in size inside an 800px ul. My goal is to have the ul scroll horizontally while allowing the text inside the li elements to break. However, this causes the li elements to lose their vertical position.
Here is the HTML code snippet:
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three three three three three three three three three three three three three three three three</li>
<li>four</li>
</ul>
</div>
This is how the CSS looks like:
ul {
width: 600px;
height: 400px;
display: block;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
li {
width: 150px;
height: 150px;
display: inline-block;
}
It might be a bit complicated to explain thoroughly.. Check out the fiddle for clarity: https://jsfiddle.net/yrLtsLrf/