防止列數只拆分容器中的一個項目

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; 

到列表項。