防止列数只拆分容器中的一个项目

Question

我有一个包含n个项目的列表容器，我使用column-count分成两列。

在某些情况下，列表中只能有一个项目。

我用下面的CSS：

http://jsfiddle.net/ny3Rc/4/

HTML：

<div class="list"> 
    <div class="list-item"> 
     The first problem is how the browser should handle one or more extra lines of content if the amount of content cannot fill up each column equally. In my opinion, the extra content should come at the bottom of the first columns, so that columns further to the right are never longer than columns further to the left. This is pretty standard practice in print design, and having it any other way just looks really strange. At least to me. Take a look and you decide 
    </div> 
</div> 

和CSS：

.list {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;} 
.list-item {} 

如何防止劈裂column-count我的列表项在两列的时候出现只是名单上的一个项目？

Answer 1

添加...

display: -webkit-inline-box; 

到列表项。