html5中的css头问题

Question

<header id="header">
  <img src="http://s30.postimg.org/rlkl06s9d/logo.jpg" alt="logo" id="logo">
  <h1>The Articles</h1>
  <nav class="header-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#"> Articles </a></li>
    </ul>
  </nav>
</header>

的CSS：

#header{
    margin:10px;
}

#logo
{
    padding-bottom: 40px;
    border-bottom: solid 2px #CCC;
}

此处标题“文章”和导航需要放在同一行，导航需要放在页面的右侧。

我需要这样：

The articles                                                     Home      Articles

我可以知道解决此问题的确切css属性是什么？

Answer 1

如下更新您的CSS。

#header h1{float:left;}
#header nav.header-nav{float:right;}
#header nav.header-nav li{display:inline-block;}

DEMO

Answer 2

这是一个选项。

JSfiddle

#header h1 {
    float: left;
}
#header nav {
    float: right;
}

#header nav li {
    display: inline-block;
}