将包装内的浮动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向右

回答

相关问题