在不同高度的Wordpress菜单中显示项目

Question

我正在尝试在菜单中以不同的高度显示3个最后一项。 （高10像素）

我可以通过以下方式设置样式：

{'a/b': 1, 'a/b/c': 2, 'a/b/c/d': 3}
1
2
3

但由于某些原因：

#main-nav li:nth-of-type(n+6){
font-size:12px;
margin-left:30px;
}

不起作用。

有什么想法可以实现这一目标吗？

Answer 1

您的代码正在运行，只是父容器不让您看到效果。

请尝试将float:right上的#main-nav更改为display:flex。

#main-nav {
    /*float: right;*/
    display: flex;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin: 0;
}

我通常会尽量避免在CSS中完全使用float，因为它们并不是真正用于布局的。