CSS有一个div，每行可以容纳5个li，如何让6个到新行

Question

所以在我的页脚中，我显示了一组菜单链接作为列，其中每列都有类似的

Header Column
Column Link
Column Link
...

我每排能装5个。我想要的是，如果内容用户添加一个第六列，它会包装到下一行，并位于第一列标题下方。

现在它换行到下一行，但似乎根据第一行的高度将其随机放置在下一行。

标记看起来像

<ul id="mainMenuList">
<li class="footerParentSubLists boldMenu"></li>
<li class="footerParentSubLists boldMenu">..subitems</li>
<li class="footerParentSubLists boldMenu">..subitems</li>
<li class="footerParentSubLists boldMenu">..subitems</li>
<li class="footerParentSubLists boldMenu">..subitems</li>
<li class="footerParentSubLists boldMenu">..subitems</li>
<li class="footerParentSubLists boldMenu">..subitems</li>
...
<ul>

对于每一列，我都在设置宽度，这足够每行5个

.boldMenu {
max-width: 170px;
width: 170px;
}

也浮动左

有什么想法吗？

Answer 1

尝试此操作(CSS3，与IE8不兼容)，使第(5n+1)个列表元素移动到新行：

#mainMenuList > li:nth-child(5n+1) {
clear: left;
}

http://jsfiddle.net/mblase75/J4gQP/

如果向后兼容性是一个问题，您可以自己直接向每(5n+1)个元素添加一个类，或者编写JavaScript为您添加，并为该类添加clear:left。