将 wordpress 子菜单拆分为两列答案

【问题标题】：Split wordpress sub-menu into two columns将 wordpress 子菜单拆分为两列
【发布时间】：2020-10-25 22:45:48
【问题描述】：

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

在上面的网页中，菜单 --> Nawishta Prime Time --> Season 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 菜单设置的菜单项“Season 2”上应用了这个类“子菜单列”。

我需要的是消除以下差距：

【问题讨论】：

你期待这个看起来如何？
@HowardE 请看帖子，我添加了截图。我需要删除我使用框突出显示的这些差距

标签： html css wordpress wordpress-theming

【解决方案1】：

没有足够的空间让您的元素彼此相邻。使用margin 会占用空间，因此它会中断到下一行。

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

有多种方法可以实现您喜欢的目标。

你可以为你的菜单设置一个宽度，所以子元素现在如何拉伸你定义的 50%：

.sub-menu { width: 480px; }

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

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

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

【讨论】：