I'm facing a challenging issue that I need help with. It's a bit complicated to explain, but I'll do my best. There's also a picture included to help illustrate the problem.
The problem I have is with an ordered list. When the next row of items in the list goes onto the second row, there seems to be excessive space between the rows. I would like them to be without any spacing.
You can view the example here: https://jsfiddle.net/52suh3pt/
- I've attempted to use float:left to resolve this issue, but it only works for one side.
Take a look at this image - the left side represents how it should appear, and the right side shows the current layout:
https://i.stack.imgur.com/mV850.jpg
Here is the HTML code:
<div>
<ul>
<li><img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg" alt=""></li>
<li><img src="https://image.freepik.com/free-vector/blue-background_1344-24.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
</ul>
</div>
And here is the CSS code:
div {
width:835px;
}
li {
display:inline-block;
list-style:none;
width:262px;
}
img {
width:100%;
}