html - 具有 2 个元素的居中顶部导航菜单

Question

嗨，我遇到了一个绝对愚蠢的问题。我目前正在设计一个网站，其中心包括两个元素，一个 Logo 和一个导航图标。即使由于低分辨率或移动设备而调整网站大小，这两者之间也应该有一个空间。

但它们不断重叠!我不知道我能做什么...这是当前标记:

<div id="navContainer">  
    <div id="topNav">
        <div id="logo"><img src="images/logo.png"/> </div>
        <div id="mobileNav"><a  href="#" ><img id="hamburger" src="images/navIcon.png"></a></div>
    </div>

及其样式:

#navContainer {margin:0 auto;}
#navContainer:hover{background: rgba(255,255,255,0.2);cursor: pointer; width:100%;}
#topNav{width:50%; margin:0 auto;}
#logo{text-align:left; min-width:250px;}
#mobileNav{text-align:right; position:relative; bottom:50px; }

我的目标是让导航像这样工作:http://www.teehanlax.com/

Answer 1

我认为您添加的内容超出了您的需要。如果您取出 Logo 和 mobileNav div 并将链接标记 float 到右侧，您将得到您要查找的内容。

<div id="navContainer">
    <div id="topNav">
        <img src="images/logo.png" />
        <a href="#"><img id="hamburger" src="images/navIcon.png"/></a>
    </div>
</div>

a{
    float:right;
}

演示:http://jsfiddle.net/39QVp/