Jquery 包装器内向右浮动的div

我正在尝试将navicon菜单按钮与屏幕768上包装器div的右边缘对齐）{ $（“#nav”）.removeAttr（“样式”）； } }); 添加此css：

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

<代码>溢出：隐藏将强制<代码>包装器 div考虑即使是浮动的.<代码>菜单> <代码>高度。

---

关闭主题，但不要使用

*{}

选择器。它很慢，会给那些不知道你有这种能力的人带来不可预测的行为：）你到底想做什么？我不明白你想要的最终结果是什么。如果您将按钮浮动到右侧，您可以固定包装的高度，将位置设置为相对，将绝对位置设置为导航…嘿，Martijn。谢谢你指出这一点。请注意。Ragner，我只是希望我的navicon与我的徽标div位于同一条线上，但位于屏幕的右侧。Omega的解决方案有助于实现此解决方案，但当列表展开时，第一个列表元素的右侧将显示在navicon图标下方。我正在寻找修复的童车经验。看看欧米茄的JSFIDLE，了解我的意思。嘿，欧米茄，这解决了我的问题。谢谢快速提问，菜单列表在从#菜单按钮打开时仍然有点问题。正如您在JSFIDLE中所看到的，链接打开，然后主链接在navicon图标下移动了一点，并位于那里。知道如何确保列表中没有任何部分显示在navicon下吗？@cphill因为您现在使用的是float，请添加此css

#nav{clear:both；}

，以阻止它剪切navicon。太好了。简单的修复。谢谢你@Omega@cphill很乐意帮忙。

 * {
        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;
        }
    }

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

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