如果您正在寻找类似的内容：

它实际上没有使用多个导航漫游器那么复杂，而且都可以通过CSS实现。

#masthead{
    background:#B81237;
    padding:0.1rem 0 0 0;
    box-shadow:#999 0 2px 6px;
    box-shadow:rgba(0,0,0,0.2) 0 2px 6px;
}
.site-logo{
    width:100%;
    margin:0 auto;
    padding:0;
    text-align:center;
}
.site-logo img{
    position:relative;
    z-index:10;
    width:15%;
    margin:0.1rem auto -9rem auto;
}
#site-navigation{
    background:#2C393E;
    padding:0 10%;
    margin:0 auto 1.8rem;
}
.main-navigation #primary-menu.menu{
    width:100%;
    padding:0;
}
.main-navigation #primary-menu.menu li{
    display:block;
    padding:0;
}
.main-navigation #primary-menu.menu li:nth-child(1n),
.main-navigation #primary-menu.menu li:nth-child(2n),
.main-navigation #primary-menu.menu li:nth-child(3n){
    float:left;
}
.main-navigation #primary-menu.menu li:nth-child(4n),
.main-navigation #primary-menu.menu li:nth-child(5n),
.main-navigation #primary-menu.menu li:nth-child(6n){
    float:right;
}

这是一个故障。在HTML中，基本上只有标题/徽标行位于导航行上方。然后，在页眉/徽标行上设置一个负的下边距-您必须处理上面的值，-9rem效果最好。（rem是设置为正文字体大小的值。因此，如果body{font-size:16px;}, 那么-9rem就是margin-bottom:-144px;.

然后使用:nth-child 伪选择器我为导航中的每个位置提供特定的指令，指示它们是向右浮动还是向左浮动。

我很确定，如果我不得不再次这样做，我可能会改用CSS flexboxdisplay:flex; 而不是使用:nth-child 伪选择器，因此如果希望更好地自动化导航项的布局，您可能需要阅读CSS Flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

作为补充说明，您通常应该在问题中包含更多的代码和信息-我刚刚为您提供了一些可能根本没有用的东西，因为您的情况可能完全不同