對齊頭基線

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

我不得不添加周圍的頭元素的跨度。