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

Question

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

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

Answer 1

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

jsFiddle 示例。

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