Question

首先，对不起我的英语，这并不完美。我有一个以ul列表排序的树，这样的东西（它是dinamic）：

<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显示每个div：table，display：cell等...但我不知道如何用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;
}

<强>演示

Try it

使用CSS在模式中显示树

2 个答案: