Hesham El Masry Hesham El Masry - 5 months ago 38
CSS Question

aligning side by side listed items li

Hey guys i have this behavior always happening when i try to align the li beside each others i get a gap in the third or fourth row. I actually don't understand why.

enter image description here

this is an example of what i always get.

this is part of my code . the ul and li :

li.product {
width: 9.043478% !important;
float: left;
margin: 2% !important;
}
ul.products {
margin-left: 0;
margin-bottom: 0;
clear: both;
}

LKG LKG
Answer Source

Use display:inline-block; instead of float:left; to get it.

Below is working example.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  margin: 3px;
}
<ul>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
</ul>