并排列出的项目li

Question

嘿伙计们，当我尝试将李对齐在彼此旁边时，我总是会发生这种行为，我在第三或第四排得到了一个间隙。我实际上不明白为什么。

这是我一直得到的一个例子。

这是我的代码的一部分。 ul和li：

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

Answer 1

使用display:inline-block;代替float:left;来获取它。

以下是工作示例。

＆＃13;

＆＃13;

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

ul li {
  display: inline-block;
  margin: 3px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将高度设置为li以防止它们看起来那样。

Answer 3

这是因为您的图像高度不相等，请尝试将高度放到图像上并查看。如果你将所有图像的高度设置为相同，它将起作用。

li img {
    height: 200px;
}