将包装器内的 div 浮动到右侧答案

【问题标题】：Floating div within wrapper to right将包装器内的 div 浮动到右侧
【发布时间】：2014-06-10 04:58:27
【问题描述】：

我正在尝试让我的导航图标菜单按钮在屏幕

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

【问题讨论】：

离题，但不要使用*{} 选择器。它很慢，并且会为那些不知道你的人产生不可预测的行为:)
你到底想做什么？我不明白你想要的最终结果是什么。如果将按钮浮动到右侧，则可以固定包装器的高度，将位置设置为相对，将绝对位置设置为导航...
嘿，Martijn。感谢您指出了这一点。记下了。
Ragner，我只是希望我的导航图标与我的徽标 div 位于同一行，但在屏幕的右侧。 Omega 的解决方案帮助实现了这个解决方案，但是当列表展开时，第一个列表元素的右侧出现在 navicon 图标下方。我正在寻找修复这种错误的体验。请参阅 Omega 的 jsfiddle 了解我的意思。

标签： jquery html css responsive-design media-queries

【解决方案1】：

添加这个css：

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

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

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

【讨论】：

嘿欧米茄，这解决了我的问题。谢谢。快速提问，当从#menu 按钮打开菜单时，列表仍然有点问题。正如您在 JSFiddle 中看到的那样，链接打开，然后主页链接在 navicon 图标下方移动一点并坐在那里。知道如何确保列表中没有任何部分出现在导航图标下吗？
@cphill 因为您现在使用的是浮点数，所以添加这个 css #nav {clear: both;} 以阻止它剪裁导航图标。
太棒了。简单的修复。谢谢@Omega。
@cphill 很高兴为您提供帮助。