Question

当我将<nav>放入<header>内时，该元素似乎将<p></p>包裹在其上方。

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;
}

Answer 1

得到了..

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

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

一起浮动

.main-nav {
    overflow: hidden;
}

或..

.main-nav {
    float: right;
}

Updated jsFiddle

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

1 个答案: