Question

我正在尝试将我的导航菜单按钮对齐到屏幕＆lt; 768px上的包装div的右边缘，但是我无法移动对象而不将其浮动到包装器之外。正如你在JSFiddle中看到的那样，navicon出现在我的logo 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");
    }
});

Answer 1

添加此css：

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

overflow:hidden会强制.wrapper div考虑#menu高度，即使它已浮动。

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

将包装器中的div浮动到右侧

1 个答案: