html - 如何使用 float 使标题完全内联？

Question

我有一些 HTML，我正在尝试找出一种方法，使我的 Logo 、导航菜单和社交媒体图标在一行中。

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

我想在左侧放置 Logo ，在中间放置导航菜单，在右侧放置社交媒体图标。

我刚刚意识到我忘记发布我的 CSS:

div .h1 {
    float: left;
}

li {
    display: inline-block;
}

ul {
    float: left;
}

.nav {
    float: left;
}

Answer 1

实现这一点的最简单方法是text-align: justify:

看看这个 Fiddle

此效果的另一个很好的教程可在 Codrops 上找到.