横並びに並んでいる項目を並べるli

Question

ちょっと私は、私は3番目または4番目の行にギャップを得るお互いの横にliを整列しようとすると、この現象は常に起こっている。私は実際に理由を理解していない。

これは私がいつも何を得るの一例です。

これは私のコードの一部です。 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;。

以下は動作例です。そのように見ているからそれらを防ぐために、李さんに

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