css - 防止列数仅拆分容器中的一项

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;

到列表项。