CSS显示：表格内容高度

Question

我正在尝试使多个列具有相同的高度，并决定沿着display:table CSS路线前进。

<div class="header" style="display: table; width: 100%; background-color: yellow">
  <div class="title" style="font-size: 30px; display: table-cell;">Navigation Title</div>
  <div class="navigation" style="display: table-cell;">
    <a class="navigation-link" style="background-color: red">Home</a>
    <a class="navigation-link">About</a>
    <a class="navigation-link">Contact</a>
  </div>
</div>

我希望navigation-link s到header表的完整高度（以便向其添加background-color），但navigation似乎有一些填充自动添加到顶部和底部。如何将navigation和navigation-link的高度设置为header表的高度。

我尝试在各个地方使用height:100%，但似乎没有用（我可能遗漏了一些东西）。这是一个显示我的意思的图表：

Answer 1

尝试使用导航链接的display: inline-block;，vertical-align: top;，padding-top和height：

.navigation {
    ...
    vertical-align: top;
}
.navigation-link {
    ...
    display: inline-block;
    height: 100%;
    padding: 7px 5px;
}

演示：http://jsfiddle.net/y8AF5/

Answer 2

这似乎可以解决您的问题： DEMO

<强> CSS

.navigation > a {
    display:inline-block;
    border:1px solid #CCC;
    line-height:2.5em;

}

到目前为止，您所做的是为class设置样式，但没有为a标记设置样式。

现在，诀窍是更改a的显示类型并使用line-height提供适当的全高间距！