html - 让 child 包裹在一个具有一定高度的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>

但是有没有可能让 child 包裹并且都留在 parent 里面？以 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 可能不适用于第 2 列的 li 元素。

如果这对您不起作用，请告诉我。