html - 我无法扩展最后一个 child 的边界

Question

我已经创建了一个组织树，我正在降低某些方框以显示工作 Angular 色的“重要性”和一般的整洁度。这一切都很好，但出于某种原因，我似乎无法扩展最后一个 child 的边框以与盒子相匹配。

在我的完整树(不是 fiddle )上，我有多个分支，它们都完美延伸，除了每个较大分支上的最后一个右边较小的分支。

为了扩展边界，我为每个 <li> 添加了一个类像这样:

.finance li:after { height: 80px; border-left: 1px solid #ccc; z-index:-999;}

我只是不明白为什么它在所有 <li> 上都能正常工作除了最后一个。

我已经在这个 fiddle 中重现了这个问题:

EXAMPLE

---

更新:

这是我的完整树，有行问题:http://jsfiddle.net/HSwx4/

这是我编辑 .tree li:last-child::before 的时候: http://jsfiddle.net/HSwx4/1/

Answer 1

它从您的 .tree li::before, .tree li::after 选择器继承 20px 的高度。更改您的 .tree li:last-child::before 选择器以包含其自身的高度:

.tree li:last-child::before {
    border-right: 1px solid #ccc;
    -webkit-border-radius: 0 0px 0 0;
    -moz-border-radius: 0 0px 0 0;
    border-radius: 0 0px 0 0;
    height: 100%;
}

JSFiddle demo .