Question

我在网站的3个不同位置有3个菜单，它们转换为手机上的一个移动切换菜单。

我在手机上遇到的问题是3个菜单显示在切换面板中，但一个在另一个菜单上而不是一个接一个。我使用.main-nav

将其定义为html菜单

我尝试再次添加.main-nav，但是它不起作用，我尝试为每个菜单在其显示的css中加上背景以及其顶部。

实时示例-此处在Codepen https://codepen.io/anon/pen/VOeKpE

上的情况如何

我希望网站上的所有3个菜单都一个接一个地显示链接，而不是现在一个个显示。

if ($('.main-nav').length) {
  var $mobile_nav = $('.main-nav').clone().prop({
    class: 'mobile-nav d-lg-none'
  });
  
  $('body').append($mobile_nav);
  $('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="fa fa-bars"></i></button>');
  $('body').append('<div class="mobile-nav-overly"></div>');

  $(document).on('click', '.mobile-nav-toggle', function(e) {
    $('body').toggleClass('mobile-nav-active');
    $('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
    $('.mobile-nav-overly').toggle();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="main-nav float-right d-none d-lg-block">
  <ul>
    <li><a href="home.html" target="_Blank">home</a></li>
    <li><a href="about.html" target="_Blank">about</a></li>
  </ul>
</nav>

现在的样子 now

所需结果 result needed

Answer 1

您可以使用

li { display: inline-block }

或

li { float: left;}

在您的CSS中。

<li>元素默认情况下使用display: block属性设置样式。表示它的行为类似于<p> or <div>这样的元素，占用了内容的整个宽度。

将此显示属性更改为inline-block可确保您仍然具有与display: block相同的功能，但是从现在开始元素将仅占用所需的空间。

如何将菜单接一个接一个地放置

1 个答案: