html - 横向导航让当前的li更高

Question

我正在处理水平导航，其中列表项需要跨越整个宽度并且“事件”列表项需要比其余项高。

通过将 ul 设置为 display: table 和列表项以显示:table-cell，成功地使列表项跨越整个宽度。

#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;
}

我想不通的是如何使“事件”列表项比其他列表项高一点。以为我会设置 margin-top: 5px 到 #l-primary-nav li(上图)并从事件 li 中删除 margin-top(下图)，但是表格单元格元素不接受边距。

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

到目前为止，这里是导航栏的链接:FIDDLE

我希望“关于”导航项比其他导航项高约 5 像素。希望使用仅 CSS 的解决方案。任何见解将不胜感激。

谢谢!

Answer 1

这可能对你有帮助

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

我已经为 li 元素提供了 display:block 并添加了宽度:

演示:http://jsfiddle.net/ggbhat/af82E/1/