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

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;

列表项目。

Answer 2

您好：)我有一个ul，其中动态添加了li个带有边框的项目。当有很多项目时，一切正常，但第二列底部显示一个项目边框。我认为问题在于默认情况下，li项目的显示属性为list-item。我用以下代码解决了这个问题：

.list-item {
    display: inline-block;
    width: 100%;
}