0

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

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

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

4

3 回答 3

0

由于您使用的是图像，因此我会为您的两个 div 添加一个大小。然后左右浮动元素。那应该可以解决您的问题。

#logo{text-align:left; min-width:250px; float:left;}
#mobileNav{text-align:right; position:relative; bottom:50px; float:right}
于 2013-08-08T15:15:53.953 回答
0

尝试对图像使用绝对定位

#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;}
于 2013-08-08T15:36:51.590 回答
0

我认为您添加的内容超出了您的需要。如果您取出 logo 和 mobileNav div 并将链接标签浮动到右侧，您将获得所需的内容。

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

于 2013-08-08T16:02:04.923 回答