如何自定义标题中的 wordpress 菜单项

Question

我创建了一个 wordpress 菜单，然后在标题中显示该菜单。 标题中共有 6 个页面或菜单项。 现在我想在左侧显示 3 个，在右侧显示另外 3 个。 由于我在样式表样式方面很弱，所以不知道如何将此菜单分为两部分。 这是标题的代码：

<nav class="navbar navbar-expand-lg" style="background: #00C9C9;padding: 20px;">
    <div class="container">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" 
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

<?php
wp_nav_menu( array( 
'theme_location' => 'my-custom-menu', 
 'depth'             => 2,
            'container'         => 'div',
            'menu_class'        => 'navbar-nav mr-auto',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
              'list_item_class'  => 'nav-item',
'link_class'   => 'nav-link m-2 menu-item nav-active'
            )
);

?>
</ul>
</div>
</div>
</nav>

Answer 1

我建议使用两个单独的菜单，但如果您不想/不能这样做，这里有一个使用margin-left : auto;的解决方案margin-left : auto;

 ul { display : flex; align-items : center; justify-content : flex-start; list-style : none; width : 600px; background-color : red; padding-left : 0; } li { margin : 0 15px; } li:nth-child(4) { margin-left : auto; }

 <ul> <li> Link 1 </li> <li> Link 2 </li> <li> Link 3 </li> <li> Link 4 </li> <li> Link 5 </li> <li> Link 6 </li> </ul>