css - 液体标题与html中的导航栏发生冲突

Question

我是 html 和 css 的新手。我在同一高度制作了一个标题和一个导航栏，但是当我将浏览器窗口缩小(流动)时，标题和导航栏发生了碰撞。我怎样才能解决这个问题？

这是我的标题和导航的 CSS 代码。栏:

/*title*/
#logo{
width: 35%;
margin-top: 5px;
font-family: georgia;
display: inline-block;
}

/* nav. bar */
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
}
/* unorded list */
#nav ul{}

#nav ul li{
display: inline-block;
height: 62px;
}
/* text*/
#nav ul li a{
padding: 20px;
background: orange;
color: white;
}

这是html代码:

<div id="logo">
    <h1><a href="../html/index.html" id="logoLink">Baby kleding online</a></h1>
</div>
<div id="nav">
    <ul>
        <li><a href="../html/index.html"id="homenav" >Home</a></li>
        <li><a href="../html/kleding.html"id="kledingnav" >Kleding</a></li>
        <li><a href="../html/bestel.html" id="bestelnav">Bestellen</a></li>
        <li><a href="../html/contact.html"id="contactnav">Contact</a></li>
        <li><a href="../html/vragen.html" id="vragennav">Vragen</a></li>


    </ul>
</div> 

提前致谢。

Answer 1

我的建议是给您的 Logo 一个绝对位置，并将导航 float 在其上，左边距与 Logo 的宽度相同。

这里的例子:

http://codepen.io/anon/pen/uvAaJ

如果您可以使用您正在寻找的行为来扩展您的问题，那将会有所帮助......因为根据您的需要，有很多方法可以处理这种情况(绝对 + 边距、媒体查询、框大小调整:边框框...)。