html - 使用 CSS 在模式中显示树

Question

首先，对不起我的英语，它并不完美。我有一个在 ul 列表中排序的树，像这样（它是动态的）：

<ul>
    <li>
        Level 1
            <ul>
                <li>Item level 2</li>
            </ul>
    </li>
</ul>
<ul>
    <li>
        Level 1
            <ul>
                <li>
                    Item level 2
                        <ul>
                            <li>Item level 3</li>
                            <li>Item level 3</li>
                        </ul>
                </li>
                <li>
                    Item level 2
                </li>
                <li>
                    Item level 2
                </li>
            </ul>
    </li>
</ul>

这是我想要的结果：

http://oi48.tinypic.com/dpgt4p.jpg

我想加入每个父亲与儿子的行列。我知道如何使用 display:table、display:cell 等正确显示每个 div...但我不知道如何使用 css 绘制这些线条以加入 div。

请问有人有什么想法或建议吗？我想将 HTML + CSS 或任何解决方案与 Javascript 结合起来。

你以前见过这样的事情吗？

Answer 1

您可以使用jsPlumb作为 jQuery 的附加组件。它将允许您将元素组合在一起，或者为了更简单的解决方案，请查看raphaels example。

Answer 2

这是仅 CSS 的方法。这不是一个完全有效的示例，但也许它可以帮助您进入正确的方向。

我使用此背景图像来连接项目：这必须改进，因为它仅在兄弟元素上有多个子元素时不起作用。

CSS

ul {
    position: relative;
    width: 100px;
    left: 115px;
}

ul > li {
    position: relative;
}

ul > li > ul {
    margin-top: -18px;
}

ul > li > ul > li:before {
    content: '';
    position: absolute;
    top: 5px;
    left: -31px;
    width: 30px;
    height: 5px;
    background: transparent url(http://i.stack.imgur.com/l2mLf.png) no-repeat 0 -10px;
}

ul > li > ul > li:first-child:before {
    top: 10px;
    left: -21px;
    width: 20px;
    height: 1px;
    background: transparent url(http://i.stack.imgur.com/l2mLf.png) no-repeat 0 0;
}

演示

尝试一下