当我放置 <nav>
在我的里面 <header>
该元素似乎包裹了 <p></p>
在它之上。
http://jsfiddle.net/otherDewi/u2xNN/
HTML
<header class="clearfix">
<h1 id="heading">Main Heading</h1>
<h2>Sub Heading</h2>
<p>Tagline - Lorem ipsum dolor sit amet. Dolore, corporis.</p>
<div id="home" class="landing">
</div><!--end #home-->
<nav class="clearfix main-nav">
<ul class="clearfix">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
CSS
header {
text-align: right;
}
header p {
float: right;
}
.main-nav {
width: 100%;
background-color: #d3eafc;
}
.main-nav ul {
clear: both;
list-style: none;
padding: 0;
margin: 10px 0;
}
.main-nav ul li {
float: left;
list-style: none;
width: 150px;
border-right: 1px solid #999;
}
.main-nav a:link,
.main-nav a:visited {
display: block;
line-height: 30px;
text-align: center;
color: #fff;
text-decoration: none;
}
最佳答案
知道了..
发生这种情况是因为 nav
由于没有设置高度以及 <p>
,栏正在折叠正在漂浮。
您有 2 个选项,要么添加一个 overflow
,或 float nav
在<p>
旁边
.main-nav {
overflow: hidden;
}
或者..
.main-nav {
float: right;
}
关于html - 为什么 nav 元素环绕其上方的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19061945/