使孩子在一定高度的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>

但是可以做到这一点，所以孩子们 wrap 都留在父母内部吗？使用JSFIDDLE作为示例，我们可以创建两个列表项目的"列"，第一个"列"中有7 li s，第二列中的3在第二个列中？

更新

我希望Div保持142px Heigh，孩子们在其中形成2列。我正在尝试创建一个菜单，如这里所示，我只是认为能够一口气从数据库中循环LI是很酷的。

Answer 1

查看此jsfiddle

我使用

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

编辑：

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

让我知道这是否对您不起作用。