將包裝內的浮動div向右

我想讓我的navicon菜單按鈕與屏幕< 768px上包裝div的右邊緣對齊，但我無法移動該對象而不將其移出包裝。正如你在JSFiddle中看到的，navicon出現在我的logo div下面。當我嘗試將navicon浮動到右側時，它正確地顯示在右側，但該按鈕包含在包裝外部，並創建了一個小車開放體驗。有什麼建議麼？將包裝內的浮動div向右

的jsfiddle：Floating navicon to right side of wrapper

HTML：

<div class="wrapper"> 
     <div class="nav-wrapper"> 
     <a href="#" id="logo">THIS IS A LOGO</a> 
     <ul id="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div>

CSS：

* { 
     margin: 0; 
     padding: 0; 
    } 

body { 
    background-color: #cecece; 
} 

.wrapper { 
      width: 960px; 
      margin-right: auto; 
      margin-left: auto; 
      background-color: #fff; 
     } 



#logo { 
    width: 200px; 

} 

#nav { 
    width: 100%; 

} 



    li { 

    } 

    li:last-child { 
     border-right:none; 
    } 


    li a { 
     display: block; 
     width:100%; 
     background:#000; 
     color: #fff; 
     font-size:1.35em; 
     text-decoration: none; 
     margin-top: 5px; 
    } 

    @media screen and (max-width: 768px) { 
     .wrapper { 
      width: 100%; 

     } 


     #menu { 
      width:1.4em; 
      display: block; 
      background:#ddd; 
      font-size:1.35em; 
      text-align: center; 

     } 

     #logo { 
      float: none; 
     } 

     #nav.js { 
      display: none; 
     } 
     ul { 
      width:100%; 
      list-style:none; 
     } 
     li { 
      width:100%; 
      border-right:none; 
     } 
    } 

    @media screen and (min-width: 768px) { 

     #nav-wrapper { 
      background-color: #fff; 
      overflow-x: visible; 
      width: 100%; 
      background-repeat: repeat; 
     } 

     #logo { 
      float: left; 
     } 

     ul { 
     width:100%; 
     overflow: visible; 
     background-color: #fff; 
     height: 40px; 

    } 

    li { 
     display: inline-block; 
     padding: 0 20px; 

    } 
     #menu { 
      display: none; 
     } 
    }

的jQuery：

$("#nav").addClass("js").before('<div id="menu">&#9776;</div>'); 
$("#menu").click(function(){ 
    $("#nav").slideToggle(); 
}); 
$(window).resize(function(){ 
    if(window.innerWidth > 768) { 
     $("#nav").removeAttr("style"); 
    } 
});

來源

2014-04-24 cphill

Offtopic，但不使用'* {}'選擇器。這很慢，並會爲那些不知道你有那些的人創造不可預知的行爲:) – Martijn

你想要做什麼？我不明白你想要的最終結果是什麼。如果將按鈕浮動到右側，則可以固定包裝的高度，將位置設置爲相對並將位置絕對設置爲導航... – Ragnar

Hey Martijn。感謝您指出了這一點。注意。 – cphill

添加這個CSS：

.wrapper {overflow:hidden;} 
#menu {float:right;}

的overflow:hidden將迫使.wrapper div來考慮，即使它是浮動的#menu高度。

http://jsfiddle.net/wXa95/1/

來源

2014-04-24 18:41:30 Omega

嘿歐米茄，這解決了我的問題。謝謝。快速的問題，從#menu按鈕打開時，菜單列表仍然有點bug。正如你可以在JSFiddle中看到的那樣，鏈接打開，然後主頁鏈接在navicon圖標下移動一點，然後坐在那裏。關於如何確保列表中沒有任何部分顯示在navicon下的任何想法？ – cphill

@cphill，因爲你現在使用的是float，所以添加這個css'#nav {clear：both;}'來阻止它修剪navicon。 – Omega

太好了。簡單的修復。謝謝@歐米茄。 – cphill

將包裝內的浮動div向右

回答

相關問題