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

我必须在标题元素周围添加一个跨度。