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

我想在左侧有一个标题，在右侧有一个垂直导航，高度相同，在边界下方10-20px左右，表示这两个元素下方的一条线

然而，我花了一个多小时才意识到这一点，但没有成功

我当前的源代码：

我希望有人能帮我。这是你的答案

html:

---

我的建议如下：看一看

然后需要使用一点jQuery：

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

显示：如果我了解您的要求，表格和100%宽度是一个很好的选择

HTML

---

你想干什么？更多细节please@IPADDRESS：正如您在小提琴中看到的，导航和左侧的文字不在同一水平/高度上。导航的位置高于h1元素。不，这不是它应该做的。它没有左右浮动这两个部分。只需更改css样式并添加宽度导航的宽度可以随时更改-我并不总是想调整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;
}

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

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('header nav').css('line-height', jQuery('header h1').height() + 'px')

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

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