Question

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

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

<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

我会为你的div添加一个大小，因为你正在使用图像。然后左右浮动元素。这应该可以解决你的问题。

#logo{text-align:left; min-width:250px; float:left;}
#mobileNav{text-align:right; position:relative; bottom:50px; float:right}

Answer 2

尝试对图像使用绝对定位

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

Answer 3

我认为你增加的比你需要的多。如果你取出徽标和mobileNav divs并将链接标签浮动到右边，你就会得到你想要的东西。

<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/

带有2个元素的居中顶部导航菜单

3 个答案: