html - 将 li 放在特定高度之后的下一列

Question

我正在研究 wordpress 网站中的导航菜单。请查看CSS 和 html的背景图像始终与顶部对齐。

这篇文章是成功的，但现在我想在 ul 的列表项 (li) 达到特定高度后将其推送到新列。进一步解释，我有一个固定高度的子菜单背景图像。当子菜单达到背景高度时，它们应该被推到下一列。

这样子菜单将始终位于背景图像中。

谢谢

score 3 · Accepted Answer

您可以在 css 中尝试添加特定计数。基本上你会说有一定数量的项目，如果超过了这个数量，它会将它推到下一个列

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

不过我必须警告你，它并没有得到普遍支持，受到挑战的浏览器只会忽略它。你必须为此想出别的办法。

另一种方法可能是在您的整体 div 中设置一定的高度，例如这样：

ul
{
    height: 100px;
    border: 1px solid #f00;
}

li
{
     float: left;
     border: 1px solid #0f0;
     width: 50px;
}

此外，我认为它只是稍微弄乱了 css，并试图找出对你来说最方便的方法。

score 0 · Accepted Answer

这可以使用 css 属性 column-count 来完成，例如，

 column-count:2;

li 或 div 上的属性和一些高度，

以下链接将为您解释更多

score 0 · Accepted Answer

我认为最简单的方法是设置inline-block您的li元素。

只要您的宽度/高度未定义为 100%，它应该可以工作。

3 回答 3