使边框右全高的div

Question

我在菜单中遇到了边框右边的问题。这就是它的样子：link我想让边框占据整个蓝条，但不会延伸到 以下，而是触摸顶部边缘。我怎么能这样做？我的代码是这样的：

#container #header #metaNavi{ 
height:58px; 
background: #bbd4eb; /* Old browsers */ 
background: -moz-linear-gradient(top, #bbd4eb 0%, #76a8d6 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd4eb), color- stop(100%,#76a8d6)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #bbd4eb 0%,#76a8d6 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbd4eb',  endColorstr='#76a8d6',GradientType=0); /* IE6-9 */ 
position:relative; 
top:455px; 
font-size:20px 
} 
#container #header #metaNavi ul{ 
padding:0; 
margin:0; 
list-style:none; 
} 
#container #header #metaNavi li{ 
display:inline-block; 
padding:8px 25px 10px 10px; 
margin:10px 10px 10px 10px; 
color:#bf7a30; 
font-family:Verdana; 
font-variant:small-caps; 
border-right: 1px solid #717171; 
min-height:58px; 
max-height:58px; 
} 
#container #header #metaNavi li:last{ 
border-right: none 

我的HTML是：

<div id="metaNavi"> 
    <ul> 
    <li id="active">Home</li> 
    <li><a href="#">Wir über Uns</li></a> 
    <li><a href="#">Dienstleistungen</li></a> 
    <li><a href="#">Kontakt</li></a> 
    </ul> 

演示在这里：http://jsfiddle.net/#&togetherjs=GA5vE7nrgv

Answer 1

你必须编辑这一行#container #header #metaNavi li

添加 - >line-height: 55px; 删除 - >padding: 8px 25px 10px 10px; add - >padding: 0 25px 0 10px;

Answer 2

试试这个CSS：

我删除了边距，沿着x轴向空间添加填充并将最小/最大高度更改为恰好高度。然后针对列表项中的活动目标，以便它是100％宽度和58像素高度的块级元素。列表项上的行高，垂直居中。

#metaNavi:before, 
#metaNavi:after { 
    content: ""; 
    display: table; 
} 
#metaNavi:after { 
    clear: both; 
} 
#metaNavi { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
} 
#container #header #metaNavi{ 
    height:58px; 
    background: #bbd4eb; /* Old browsers */ 
    background: -moz-linear-gradient(top, #bbd4eb 0%, #76a8d6 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd4eb), color-stop(100%,#76a8d6)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #bbd4eb 0%,#76a8d6 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbd4eb', endColorstr='#76a8d6',GradientType=0); /* IE6-9 */ 
    position:relative; 
    top:455px; 
    font-size:20px 
} 
#container #header #metaNavi ul{ 
    padding:0; 
    margin:0; 
    list-style:none; 
} 
#container #header #metaNavi li{ 
    display:block; 
    float: left; 
    padding:0 20px; 
    color:#bf7a30; 
    font-family:Verdana; 
    font-variant:small-caps; 
    border-right: 1px solid #717171; 
    height:58px; 
    line-height: 58px; 
} 
#metaNavi ul li a{ 
    display: block; 
    width: 100%; 
    height: 58px; 
} 
#container #header #metaNavi li:last{ 
    border-right: none 
} 
#container #header #metaNavi li a{ 
    color:#bf7a30; 
    text-decoration: none; 
} 
#container #header #metaNavi #active{ 
    color:#333333; 
    font-weight:800; 
}