css - CSS 有一个 div，每行可以容纳 5 li 如何让 6 进入新行

Question

所以在我的页脚中，我将一堆菜单链接显示为每列的列

Header Column
 Column Link
 Column Link
 ...

我每行可以装 5 个。我想要的是，如果内容用户添加了第 6 列，它将换行到下一行并且位于第一列标题的下方。

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

标记看起来像

 <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该类。