当我将<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;
}
答案 0 :(得分:1)
得到了..
之所以发生这种情况是因为nav
栏因为没有设置高度而导致崩溃,因为<p>
正在浮动。
您有2个选项,可以添加overflow
,也可以将nav
与<p>
.main-nav {
overflow: hidden;
}
或..
.main-nav {
float: right;
}