导航标签与浮动：左

Question

当我尝试将nav li向左浮动时，它会在标题标记之后。

当我删除左侧浮动时，它位于标题标记下。

我认为当我使用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来达到预期效果：

＆＃13;

＆＃13;

FROM ubuntu
ENV HELLO=world
RUN /bin/bash -c 'echo "$HELLO" > /txt'

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

浮动将元素拉出自然文档流。您可以在包含元素上尝试clearfix，只需添加类clearfix（如此jsfiddle：https://jsfiddle.net/qfzu86hr/2/）：

＆＃13;

＆＃13;

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

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

/* Begin Fix float container issues */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix       {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix    {height: 1%;}
.clearfix           {display: block;}
/* End hide from IE-mac */

＆＃13;

<header class="site-header clearfix">
    <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>

＆＃13;

＆＃13;

＆＃13;