如何使用float使我的标题完全内联？

Question

我有一些HTML，我正试图找出一种方法，使我的徽标，导航菜单和社交媒体图标成为一条线。

<div class="header">
    <div class="logo"><h1>Logo</h1></div>
        <ul class="nav">
           <li class="menuitem"><a href="#">Home</a></li>
           <li class="menuitem"><a href="#">Blog</a></li>
           <li class="menuitem"><a href="#">Test</a></li>
           <li class="menuitem"><a href="#">Contact</a></li>
        </ul>
    <div class="social-media">
       <a href="#"><img src="facebook.jpg"></a>
       <a href="#"><img src="twitter.jpg"></a>
       <a href="#"><img src="pinterest"></a>
    </div>
</div>

我想左边的徽标，中间的导航菜单和右边的社交媒体图标。

我刚才意识到我忘记发布我的CSS了：

div .h1 {
    float: left;
}

li {
    display: inline-block;
}

ul {
    float: left;
}

.nav {
    float: left;
}

Answer 1

实现此目标的最简单方法是text-align: justify：

看一下 Fiddle

此效果的另一个好教程可在Codrops找到。