边框+标题+导航-定位问题

Question

我想有一个标题(在左侧)和垂直导航(在右侧)在相同的高度和大约10-20px以下的边界表明这两个元素下的线。

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

我现在的源码：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>

Answer 2

我的建议如下：(看看http://jsfiddle.net/j72p9/)

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

header h1 {
    float: left;
    border: 1px solid red;
    margin:0
}

header nav {
    float: right;
}

#clearfix {
    clear: both;
}

header nav {
    border: 1px solid blue;
}

/* Nav. Style */
header nav > ul {
    vertical-align:middle;
    margin: 0;
}

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

然后你需要使用一点jQuery：

jQuery('header nav').css('line-height', jQuery('header h1').height() + 'px')

Answer 3

如果我理解你的要求，display: table和100%宽度是一个很好的选择。

Have a fiddle!

HTML

<header>
    <h1>
        Headline on the left
    </h1>
    <nav>
        <a href="#">Navigation</a> <a href="#">On The</a> <a href="#">Right</a>
    </nav>
</header>

CSS

* {
    margin: 0;
    padding: 0;
}
header {
    border-bottom: 1px solid red;
    display: table;
    width: 100%;
}
header h1 {
    display:table-cell;
    padding: 10px;
    vertical-align: middle;
}
header nav {
    display:table-cell;
    text-align: right;
    padding: 10px;
    vertical-align: middle;
}
header nav a {
    margin: 0 10px;
    white-space: nowrap;
}