html - CSS 列内容中断

Question

我正在使用其中包含 Accordion 的子菜单。菜单在 ul/li 中。

我这样做了子菜单的主要ul，显示结果正是我想要的:

.main-navigation #cssmenu ul > #menu-item-3465 > ul {
    column-count:3; 
    column-rule:2px solid #fff;
    column-fill:auto;
    column-gap:30px;
    width:100%;
    left:0;
}

但是，当我们在该子菜单中打开 Accordion 时，分栏和内容进入其他栏的其余部分:

即使打开 Accordion ，我也希望列保持不变。

我在 li 上尝试了 column-break-inside 之类的东西，但它根本不起作用。

我也尝试过使用 flexbox，但我遇到了完全相同的问题。

我不知道我是否可以做些什么来让它发挥作用，或者我们需要重新考虑我们的菜单。

需要一些建议。

谢谢。

Answer 1

为了解决您的问题您需要应用CSS 分栏符。这是包含您可能需要的几乎所有方法的链接:https://www.quirksmode.org/css/columns/breaks.html选择满足您的子菜单的那个。