Question

我尝试将主菜单分为2个不同的部分：1个位于徽标左侧，而1个位于徽标右侧。

尝试了下面提到的代码，但结果是菜单设计不一致。

    @media only screen and ( min-width: 960px ) {
#top-menu-nav {
width: 100%;
}
.my-menu-item-1 {
    padding: 0px 60px;
    float: left;
    text-align:left
    }
.my-menu-item-2, .my-menu-item-3 {
padding: 0px 60px;
float: left;
text-align: left;
}
.my-menu-item-4 {
    padding: 0px 0px;
    float: right;
}
.my-menu-item-5, .my-menu-item-6 {
    padding: 0px 45px;
    float: right;
    }}

网站：mastermindagency.uk 即使当我对菜单1和4（0，0）和2-3和5-6（0，50）使用相同的填充值时，徽标也位于左侧约100px，而不是完美居中，因此我不得不编辑填充现在看起来好像不一致了。

Answer 1

每个<li>的宽度都不同，因此您不应为每个菜单项使用相同的填充px。我认为没有其他解决方案。但是使用FLEX，您可以解决此问题。请参阅github

将Wordpress菜单分为2组，左右菜单

1 个答案: