排列并排列出的项目李

Question

嘿家伙我有这种行为总是发生，当我尝试对齐旁边彼此我在第三或第四行得到一个空白。我其实不明白为什么。

这是什么，我总是得到一个例子。

这是我的代码的一部分。 UL和李：

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;得到它。

以下是工作示例。

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>

Answer 2

设置高度李时珍，以防止他们在寻找的方式。

Answer 3

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

li img { 
    height: 200px; 
}