부동 리는 원하지 않는 간격

Question

매우 높은 수준에서

잎이 내 HTML입니다 :

<ul> 
    <li>Item1</li> 
    <li>Item2</li> 
    ... 
    <li>Item21</li> 
</ul> 

이 내 CSS입니다 :

li { 
    display: block; 
    float: left; 
    margin: 0.3em; 
    padding: 2px; 
    max-width: 10em; 
    min-width: 10em; 
    min-height: 12em; 
    border: 1px solid rgb(230, 230, 230); 
    background-color: rgb(250, 250, 250); 
} 

내 의도는 목록을 준비하는 것입니다 항목을 3x7 격자 패턴으로 표시하지만 실제로는 다음과 같습니다. 처음 6 개 항목은 원하는대로 정확하게 표시됩니다 (3x2 격자로). 그러나 일곱 번째 행은 컨테이너 div 오른쪽의 나머지 행과 함께 공백으로 표시됩니다. 그런 다음 패턴은 다음 줄에서 계속됩니다. Here's a picture of what it looks like

내 목록에는 정확히 14 개의 항목이 있으므로이 패턴이 적어도 한 번 이상 반복되는지 확인할 수 있습니다. 제 질문은 누군가 제 7의 항목 만이 이런 식으로 행동하는 이유와 제가 그것을 고칠 수있는 이유를 말할 수 있는지입니다.

Answer 1

다섯 번째 항목은 제공 한 스크린 샷의 다른 항목보다 1 배 더 높습니다. 이것은 일곱 번째 항목이 그 것처럼 행동하게 만듭니다. 코드를 다시 살펴보고 다섯 번째 항목에서 다른 항목보다 높게 표시되는지 확인하십시오.