css - ヘッダーのベースラインを揃える

Question

私は次のようにいくつかのマークアップを持っています

  <header>
    <h1>{{site.title}}</h1><h2>&nbsp;{{site.subtitle}}</h2>
    <nav>
      <a href="/">Home</a> |
      <a href="/me.html">About Me</a>
    </nav>
  </header>

<nav>要素を右に浮かせながら、すべてのベースラインを揃えたい。何か案は？

Answer 1

次の解決策を見つけました（少ない）：

header {
  position: relative;
  display: table;
  width: 900px;

  span {
    display: table-cell;
    text-align: left;
  }   

  h1, h2 {
    display: inline-block;
    margin: 0;
  }   

  nav {
    display: table-cell;
    text-align: right;
    float: none;
  }   
}

ヘッダー要素の周りにスパンを追加する必要がありました。