为什么nav元素环绕着它上面的标签

时间:2013-09-28 00:23:50

标签: html css

当我将<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;
}

1 个答案:

答案 0 :(得分:1)

得到了..

之所以发生这种情况是因为nav栏因为没有设置高度而导致崩溃,因为<p>正在浮动。

您有2个选项,可以添加overflow,也可以将nav<p>

一起浮动
.main-nav {
    overflow: hidden;
}

或..

.main-nav {
    float: right;
}

Updated jsFiddle