html - Border + Heading + Navigation - 定位问题

Question

我想要一个标题(在左侧)和一个垂直导航(在右侧)在相同的高度，并且在边框下方约 10-20 像素处指示这两个元素下方的一条线。

我尝试了一个多小时来实现它，但是没有成功。

我当前的源代码:http://jsfiddle.net/j72p9/

<header>
    <h1>Headline on the left</h1>
    <nav>
        <ul>
            <li><a href="#">Navigation</a></li>
            <li><a href="#">On The</a></li>
            <li><a href="#">Right</a></li>
        </ul>
    </nav>
    <div id="clearfix"></div>
</header>

CSS:

header {
    border-bottom: 1px solid red;
}

header h1 {
    float: left;
}

header nav {
    float: right;
}

#clearfix {
    clear: both;
}

/* Nav. Style */

header nav > ul li {
    display: inline;
    list-style: none;
}

我希望有人能帮助我。

Answer 1

这是你的答案 http://jsfiddle.net/j72p9/1/

html:

   <div style="display: table; height: 100px; overflow: hidden;background:yellow;">
   <div style="display: table-cell; vertical-align: middle;">
   <div>
     everything is vertically centered in modern IE8+ and others.
   </div>
   </div>
   <div style="display: table-cell; vertical-align: middle;">
   <div>
     everything is vertically centered in modern IE8+ and others.
   </div>
   </div>
   </div>