导航栏填充和边框不在栏的 100% 高度答案

【问题标题】：Navbar padding and border not at 100% height of bar导航栏填充和边框不在栏的 100% 高度
【发布时间】：2014-02-04 13:40:48
【问题描述】：

我注意到我的链接的边框没有覆盖navbar 高度的 100%。要么在padding:10px; 处太短一个像素，要么在padding:11px; 处太长一个像素（这对我来说完全没有意义）

Link to fiddle

<nav class="bg">
    <div class="navwrap width">
        <div class="nav"><div class="navLeft"></div><a href="#">Link</a><a href="#">Link</a><a href="#">Link</a><div class="navRight"></div></div>
    </div>
</nav>

CSS：

.width{margin:0 auto;min-width:1000px;width:84%;}
 nav{border-top:1px solid #BBB;border-bottom:1px solid #BBB;}
.navwrap{display:flex;flex-flow:row-wrap;padding:10px 0;font-weight:bold;color:#FFF;}
.nav{flex:1;}
.navLeft,.navRight{display:inline;padding:10px 0;}
.navLeft{border-right:1px solid #555;}
.navRight{border-left:1px solid #000;}
.nav a{padding:10px;background:rgba(0,0,0,0);transition:background-color 0.2s linear;border-left:1px solid #000;border-right:1px solid #555;}
.nav a:hover{background:rgba(0,0,255,1);}

另外，虽然我一直使用像素来设置高度，但我如何使用 100% 来代替？我确信这会解决问题，但是当我这样做时，填充和翻转背景颜色会变为页面高度的 100%。

【问题讨论】：

标签： html css border padding navbar

【解决方案1】：

从 navwrap div 中移除填充并在锚元素上设置 display:inline-block

FIDDLE

【讨论】：

干杯。做到了。我在同一个栏上有一个搜索表单现在搞砸了，但我会搞砸它，直到它再次工作。