CSS多列：并非所有列都填充

Question

有关所有产品的概述，我将每个产品作为列表项。 ul我给了mulit-column attribut并将列数设置为5.我有9个产品，所以第一行应该有5个项目，第二行应该有4个 - 对吧？

ul.products{
    -moz-column-count: 5;
    -moz-column-gap: 30px;
    -webkit-column-count: 5;
    -webkit-column-gap: 30px;
    column-count: 5;
    column-gap: 30px;
}

问题是只填充了3列。在第四和第五是没有产品/列表项目。我做了一个jsfiddle，你可以看到这个并试验：http://jsfiddle.net/oliverspies/W8PE9/2/

为什么列表项目的排列方式如此？如何填写所有列？

Answer 1

如果您在display:inline-block上删除.products li，则会有5列。

请参阅 FIDDLE

Answer 2

DEMO

.products{
    height: 400px;
}