0

まず第一に、私の英語で申し訳ありませんが、それは完璧ではありません。私は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を正しく表示する方法を知っていますが、divを結合するためにcssを使用してこれらの線を描画する方法がわかりません。

誰かアイデアや提案はありますか？HTML+CSSまたは任意のソリューションをJavascriptと組み合わせたいと思います。

このようなものの前に見たことがありますか？

4

2 に答える 2

0

jsPlumbを jQuery のアドオンとして使用できます。要素を一緒に配管することができます。または、もう少し単純な解決策については、raphaels exampleをご覧ください。

于 2013-03-23T09:16:34.517 に答える
0

これは 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;
}

デモ

それを試してみてください

于 2013-03-23T09:43:55.507 に答える