我是 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>
提前致谢。
最佳答案
我的建议是给您的 Logo 一个绝对位置,并将导航 float 在其上,左边距与 Logo 的宽度相同。
这里的例子:
http://codepen.io/anon/pen/uvAaJ
如果您可以使用您正在寻找的行为来扩展您的问题,那将会有所帮助......因为根据您的需要,有很多方法可以处理这种情况(绝对 + 边距、媒体查询、框大小调整:边框框...)。
关于css - 液体标题与html中的导航栏发生冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19397818/