html - 保持所有 LI 的边框高度相同

Question

我有一个包含嵌套 UL 的菜单。是否有一种纯 CSS 方法可以使垂直边框保持最高菜单项集的高度？请记住，此菜单是动态的，因此宽度和高度都可以更改。

http://jsfiddle.net/simply_simpy/Kmyjr/

Answer 1

您可以删除 float:left 规则并添加 display:table-cell 规则。

jsFiddle example .

CSS:

#menu-secondary_menu > li {
    border-left: 1px solid #7d7d7d;
    display: table-cell;
    font-size: 9px;
    line-height: 16px;
    text-transform: uppercase;
    color: #7d7d7d;
    padding: 0 10px 0;
    margin: 0 10px 0;
}