将 wordpress 子菜单拆分为两列

Question

我尝试了一些代码片段将 wordpress 子菜单分成两列，我取得了一些成功。但它们并没有完全分裂。奇数菜单项下方有白色 space，偶数菜单项上方有白色-space。 Link for Menu

在上面的网页中，菜单 --> Nawishta Prime Time --> 第 2 季

菜单项似乎不在一条直线上并且产生了空白。以下是我使用的 CSS 代码：

.sub-menu-columns ul.sub-menu li {
    clear: initial;
    display: inline-block;
    float: left;
    width: 50%;
} 
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 300px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
}

我在 wordpress 菜单设置的菜单项“第 2 季”中应用了这个 class“子菜单栏”。

我需要的是消除像这样的差距：

Answer 1

没有足够的 space 让您的元素彼此相邻。使用 margin 你正在占用 space，所以它会跳到下一行。

请删除 margin-right: 300px; 这不是正确的方法。

有多种方法可以实现您喜欢的效果。

您可以为菜单设置宽度，因此子元素现在如何拉伸您定义的 50%：

.sub-menu { width: 480px; }

使用它，您的列将彼此相邻对齐。

如果您不想使用固定宽度，您可以使用 CSS 网格来定义子列的外观：

.sub-menu { display: grid; grid-template-columns: 1fr 1fr; }

将 wordpress 子菜单拆分为两列

Split wordpress sub-menu into two columns

html

css

wordpress

wordpress-theming