如何更改他們保持統一的菜單？

代碼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出現故障時，不知道它是從哪裏來的距離。

如果你認爲它來自我怎麼能解決問題呢？

來源

2016-02-07 Marius

當你增加屏幕尺寸時，右邊的菜單會改變，因爲它有一個css float: right;。

所以左邊的菜單將永遠存在，而右總會浮起權，所以在更大屏幕上因此GAP

其位於：

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

而且

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

如果你刪除了漂浮物，它會加入，但它的東西你想要的等等。使用chrome dev來試試這個鏈接

來源

2016-02-07 20:00:44

IMO在你的代碼中有錯誤，例如你把<ul id="menu-menu-1" class="nav navbar-nav">放在一個使用100％空間的div中，並且它沒有被清除，所以它的高度是0px。當你縮小它就像在一個更寬的屏幕上看到的網站，所以導航菜單的行爲是正確的，因爲一個是左側浮動，另一個是右側浮動，你應該嘗試將所有導航鏈接和標誌放在一個容器中該頁面，因此縮小它們將始終保持在中心位置。

來源

2016-02-07 20:12:00

如何更改他們保持統一的菜單？

回答

相關問題