Html 水平导航使当前li更高

我正在进行水平导航，其中列表项需要跨越整个宽度，“活动”列表项需要比其他项目高

通过将ul设置为display:table并将列表项设置为display:table单元格，成功地使列表项跨越整个宽度

#l-primary-nav ul {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: table;
}

#l-primary-nav li {
    display: table-cell;
    text-align: center;
    line-height: 40px;
}

我不知道如何使“活动”列表项比其他列表项高一点。我想我会为#l-primary-nav li（上图）设置一个边距顶部：5px，并从活动li（下图）中删除边距顶部，但是表格单元格项不接受边距

#l-primary-nav li.active {
    background: #fff;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
}

以下是到目前为止导航栏的链接：

我希望“关于”导航项比其他导航项高5像素左右。希望使用CSS专用解决方案。如有任何见解，将不胜感激

---

谢谢大家!

请务必参考以下小提琴手：

HTML

这可能对你有帮助

 #l-primary-nav li {
     display:block;
     width:140px;
     float:left;
     text-align: center;
     margin-top:4px;
     border: 1px solid #c2c2c2;
 }

我为li元素提供了display:block，并增加了宽度：

---

演示：

通过使用上述建议的解决方案，我能够使列表项跨越整个宽度，同时使活动列表项具有更高的高度。链接到代码：

---

看看这把小提琴：这个解决方案不允许列表项自动跨越整个宽度。看起来像是添加了浮动：左至#l-主导航li会带走整个跨度。有没有一种方法可以允许全宽范围和不同的高度？以您的解决方案为基础，我能够使列表项扩展到全宽，同时使活动列表项具有更高的高度。这里有一个指向最终代码的链接：此解决方案还自动删除横跨整个宽度的列表项。我需要避免给列表项设置宽度。

l-primary-nav {
width: 600px;
margin: 0 auto; 
}
.l-inline li {
display: inline-block;
}
l-primary-nav ul {
width: 99.8%;
margin: 0;
padding: 0;
border: 1px solid #c2c2c2;
float: left;
display: table;
}
l-primary-nav li {
text-align: center;
display: table-cell;
float: left;
}
l-primary-nav li a{
line-height: 40px;
height: 41px;
padding: 0 30px;
border-top: 1px transparent;
display: block;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.18, #FBFBFB), color-stop(1, #D1D1D1));
background-image: -o-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -moz-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -webkit-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -ms-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: linear-gradient(to bottom, #FBFBFB 0%, #D1D1D1 100%);
}
l-primary-nav li a:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E1E3E6), color-stop(1, #BABCBF));
background-image: -o-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -moz-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -webkit-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -ms-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: linear-gradient(to bottom, #E1E3E6 0%, #BABCBF 100%);
}

l-primary-nav li.active a{
margin-top: -5px;
height: 45px;
position: relative;
background: #fff;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
border-top: 1px solid #c2c2c2;
}

 #l-primary-nav li {
     display:block;
     width:140px;
     float:left;
     text-align: center;
     margin-top:4px;
     border: 1px solid #c2c2c2;
 }

#l-primary-nav {
width: 600px;
margin: 0 auto;
}
.l-inline li {
display: inline-block;
}
#l-primary-nav ul {
width: 99.8%;
margin: 0;
padding: 0;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
border-bottom: 1px solid #c2c2c2;
float: left;
display: table;
}
#l-primary-nav li {
text-align: center;
display: table-cell;
vertical-align: bottom;
border-top: 1px solid #c2c2c2;
}

#l-primary-nav li a{
line-height: 40px;
height: 41px;
border-top: 1px transparent;
display: block;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.18, #FBFBFB), color-stop(1, #D1D1D1));
background-image: -o-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -moz-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -webkit-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -ms-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: linear-gradient(to bottom, #FBFBFB 0%, #D1D1D1 100%);
}
#l-primary-nav li a:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E1E3E6), color-stop(1, #BABCBF));
background-image: -o-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -moz-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -webkit-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -ms-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: linear-gradient(to bottom, #E1E3E6 0%, #BABCBF 100%);
}

#l-primary-nav li.active a{
margin-top: -5px;
height: 45px;
position: relative;
background: #fff;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
border-top: 1px solid #c2c2c2;
}