让孩子们在一定高度的div中包裹

Question

如果父元素中有一组子元素，并且父元素设置为某个高度小于添加的所有列表项，则默认情况下，子元素直接从父元素流出：

http://jsfiddle.net/BxJLH/

<ul>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
    <li><a href = '#'> Item </a></li>
</ul>

但是有可能让孩子换行并且所有孩子都呆在父母身边吗？使用jsfiddle作为示例，我们可以创建列表项的两个“列”，第一个“列”中有7个li，第二个列中有3吗？

更新

我希望div保持142px高度，并且孩子们在其中形成2列。 I'm trying to create a menu as seen here，我认为能够一举将li从数据库中循环下来会很酷。

Answer 1

看看这个JSFiddle

我用过

.unordered-list {
    -moz-columns: 2 142px;
    -webkit-columns: 2 142px;
    columns: 2 142px;
}

编辑：

看看这个JSFiddleUpdated 唯一的问题是，UL的CSS可能不适用于第二栏中的li项目。

如果这不适合您，请告诉我。