排列並排列出的項目李

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