jquery - 包装内的 float div 向右

Question

我正在尝试让我的导航图标菜单按钮在 <768px 的屏幕上与包装器 div 的右边缘对齐，但我无法移动对象而不将其 float 到包装器之外。正如您在 JSFiddle 中看到的那样，导航图标出现在我的 Logo div 下方。当我尝试将导航图标 float 到右侧时，它正确地出现在右侧，但该按钮包含在包装器的外部并创建了错误的打开体验。有什么建议吗？

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");
    }
});

Answer 1

添加这个CSS:

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

overflow:hidden 将强制 .wrapper div 考虑 #menu 高度，即使它是 float 的。

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