I have encountered a seemingly simple question, but I am struggling to find a solution.
In my HTML code, I have two ul elements. Each li within these lists is styled with float:left in my CSS. The reason behind this styling choice is that I am working on a four-column grid layout and needed to arrange the list items accordingly.
The issue arises when a list does not occupy the full width of my grid, causing the subsequent list to start on the same line.
https://i.stack.imgur.com/D8EoC.jpg
It is important for the items within each list to remain inline while the lists themselves should be displayed below one another.
Visit this link for more details: https://jsfiddle.net/gugubaight/93xv9tgt/1/
Here is the structure of the HTML:
<div class="wrapper">
<ul id="tools">
<li>
<img>
</li>
</ul>
<ul id="tools">
<li>
<img>
</li>
</ul>
</div>
This snippet shows the SCSS styling being used:
.wrapper {
width: 1440px;
max-width: 90%;
margin: 0 auto;
}
ul#tools {
padding: 0;
margin: 0;
list-style: none;
li {
padding: .25rem .25rem 3rem;
width: 25%;
float: left;
-webkit-animation: appear .5s ease-in;
animation: appear .5s ease-in;
img {
width: 350px;
max-width: 350px;
height: 225px;
max-height: 225px;
border-radius: 3px;
}
}
}
Your assistance with solving this issue would be greatly appreciated!