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

Question

我正在 WordPress 网站上开发导航菜单。请查看css 和 html 的背景图像始终与顶部对齐。

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

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

谢谢

Answer 1

你可以尝试在CSS中添加一个特定的计数。基本上你告诉有一定数量的物品，如果超过这个数量，它会将其推到下一列

\n\n

ul {\n    -moz-column-count: 2;\n    -webkit-column-count: 2;\n    column-count: 2;\n}\xe2\x80\x8b\n

\n\n

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

\n\n

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

\n\n

ul\n{\n    height: 100px;\n    border: 1px solid #f00;\n}\n\nli\n{\n     float: left;\n     border: 1px solid #0f0;\n     width: 50px;\n}\n

\n\n

此外，我认为它只是稍微搞乱了 css，并尝试找出最适合您的方法。

\n