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

我的建议是给你的标志一个绝对位置，并将导航浮动在它上面，左边距与你的标志宽度相同。

这里的例子：

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

如果你可以用你正在寻找的行为来扩展你的问题会有所帮助......因为有很多方法可以根据你想要的来处理这种情况（绝对 + 边距，媒体查询，box-sizing:border-box ...）。