html - 带有 float :left 的导航标签

Question

当我尝试将 nav li float 到左侧时，它位于标题标签之后。

当我删除左边的 float 时，它位于标题标志下。

我想当我使用float:left时，它应该只在标题的左侧，而不是在标题之后...

请帮帮我......

---

我的代码:

.site-header{
    border-bottom: 5px solid #999;
}

.site-nav ul {
    display : block;
    float: left;
}

<header class = "site-header">
    <h1>this is title 1</h1>
    <nav class = "site-nav">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>

Answer 1

你可以使用 a clearfix达到预期效果:

.site-header {
    border-bottom: 5px solid #999;
}

.site-header:before, .site-header:after {
    content: " ";
    display: table;
}

.site-header:after {
    clear: both;
}

.site-nav ul {
    display : block;
    float: left;
}

<header class = "site-header">
    <h1>this is title 1</h1>
    <nav class = "site-nav">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
</header>