Question

我的菜单中有关于border-right的问题。这就是它的样子：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

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

Answer 2

试试这个CSS：

我移除了边距，沿x轴向空间添加了填充，并将min / max-height更改为高度。然后将列表项中的活动对象作为目标，使其成为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;
}

使div的右边全高度

2 个答案: