0

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

在上面的网页中，菜单 --> 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 菜单设置中的菜单项“第 2 季”中应用了此类“子菜单列”。

我需要的是消除差距，如： 在此处输入图像描述

4

1 回答 1

1

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

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

有多种方法可以实现你喜欢的。

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

.sub-menu { width: 480px; }

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

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

.sub-menu { display: grid; grid-template-columns: 1fr 1fr; }
于 2020-07-05T20:07:25.510 回答