Question

我正在为我的wordpress项目使用slim jetpack插件的编辑CSS扩展。不幸的是，它被放置在内部服务器上，因此我无法与您分享链接。

问题：我在标题下的菜单下有30个子菜单。决定最好的方法是使用自定义CSS编辑特定菜单，而不是更改所有菜单外观。

所以我按照提出的指南here：在所需菜单上添加了子菜单列作为自定义CSS类并将其添加到我的CSS文件中：

＆＃13;

.sub-menu {
    width: 410px;
}
.sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
}

＆＃13;

我最终得到的所有子菜单都是410px宽（而不是原来的184px）。并且所需位置的子菜单仍在一列中，但在左右两侧只有空格。

我是CSS的新手，但似乎第一个.sub-menu声明错误地放在这里，因为它会影响所有的子菜单。我也在努力在同一行上获得2个子菜单项。

我有点了解＆＃34; leg＆＃34;从中成长，但似乎我在这里缺少一些东西。

我搜索了类似的案例，但未找到有关此主题的明确解释。非常感谢任何帮助。

Answer 1

经过一番研究，我发现了一个 .sub-menu类明确：两者;定义导致了这些问题。

这个代码我最终完美无缺：

＆＃13;

.sub-menu-columns ul.sub-menu li {
	clear: initial;
	float: left;
	width: 50%;
}

＆＃13;

Answer 2

以防万一有人来这里寻找类似的解决方案，这对我有用，在 WordPress 5.7 上，主题 Chaplin：

@media (min-width: 999px) {
.submenu-columns>ul {
    width:50rem;
    }
.submenu-columns>ul>li {
    width:50%;
    float:left;
    }
.submenu-columns>ul>li a {
    width:100%;
    }
.submenu-columns.odd>ul>li:last-child {
    width:100%;
    }
}

Wordpress - 列出2列中的子菜单 - CSS

2 个答案: