2

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

1 回答 1

1

知道了..

之所以发生这种情况，是因为nav条形图由于没有设置高度而正在坍塌，并且<p>是浮动的。

您有 2 个选项，要么添加，overflow要么浮动nav<p>

.main-nav {
    overflow: hidden;
}

或者..

.main-nav {
    float: right;
}

更新了 jsFiddle

于 2013-09-28T00:33:03.387 回答