提问者:小点点

将wordpress子菜单拆分为两列


我尝试了一些代码片段将wordpress子菜单拆分为两个Colum,我获得了一些成功。但它们并没有完全分开。奇数菜单项下面有空白,偶数菜单项上面有空白。菜单链接

在上面的网页中,菜单-->纳维什塔黄金时段-->第二季

菜单项似乎不在一条线上,造成了白色的空隙。下面是我使用的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季”上应用了这个类“子菜单-列”。


共1个答案

匿名用户

没有足够的空间让你的元素彼此挨着。使用margin会占用空间,因此会中断到下一行。

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

有多种方法可以达到你喜欢的目的。

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

.sub-menu { width: 480px; }

使用此方法,列将彼此对齐。

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

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