对齐标题的基线

时间:2012-07-17 11:53:00

标签: css html5

我有一些标记如下

  <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>元素浮动到右侧。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我找到了以下解决方案(少):

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

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