html - 我如何更改他们保持统一的菜单？

Question

我有this页

代码 HTML:

<div class="content-menu">
    <div class="navbar navbar-inverse bs-docs-nav" role="banner">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <div class="logo-mobile">
                <a href="#"> <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-mobile.png"></a>
                <ul class="lang-top navbar-right">
                    <li>
                        <a href="#">En</a>
                    </li>
                    <li>
                        <a href="#">fr</a>
                    </li>
                </ul>
            </div>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <div class="menu-menu-1-container">
                <ul id="menu-menu-1" class="nav navbar-nav">
                    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a title="Home" href="http://dg-design.ch/bagel/?page_id=4">Home</a></li>
                    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a title="News" href="http://dg-design.ch/bagel/?page_id=10">News</a></li>
                    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a title="Events" href="http://dg-design.ch/bagel/?page_id=63">Events</a></li>
                    <li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71"><a title="Delivery" target="_blank" href="http://www.smood.ch/en/156_bagel-house-café">Delivery</a></li>
                    <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a title="About us" href="http://dg-design.ch/bagel/?page_id=6">About us</a></li>
                    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a title="Contact" href="http://dg-design.ch/bagel/?page_id=12">Contact</a></li>
                </ul>
            </div>
            <ul class="lang-top navbar-right">
                <li>
                    <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/logo-menu.png">
                </li>
                <li class="icon">
                    <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png">
                </li>
                <li class="icon">
                    <a href="#">MENU</a>
                </li>
                <li class="icon">
                    <a href="#">En</a>
                </li>
                <li class="icon">
                    <a href="#">fr</a>
                </li>
                <li class="icon">
                    <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png">
                </li>
                <li class="icon">
                    <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png">
                </li>
                <li class="icon">
                    <img src="http://dg-design.ch/bagel/wp-content/themes/wp_bagel/assets/img/menu.png">
                </li>
            </ul>
        </nav>
    </div>
</div>

不幸的是，当我按下 ctrl 和 minus 时，出现了一个问题......一个不知道它从哪里来的距离。

你认为它来自哪里，我该如何解决这个问题？

Answer 1

当您增加屏幕尺寸时，右侧菜单会发生变化，因为它上面有一个 css float: right;。

因此左侧菜单将始终存在，而右侧菜单将始终向右浮动，因此在较大的屏幕上因此存在 GAP

它位于:

  .navbar-right {  float: right....

还有

 @media (min-width: 768px)
  .navbar-right {
      float: right !important;

如果你删除 float 它会加入，但它是你想要的等等。使用 chrome dev 在该链接上尝试