如何使用HTML按行連接無序列表中的項目

Question

我正在一個族譜網站上展示一個人的後代，名字下方是一個無序和縮進列表。

有沒有一種方法可以通過行連接這個列表中的項目符號，以形成一個向下分支的家族樹，只使用HTML？

Answer 1

沒有爲這是一個非常方便的指南。這裏是小提琴：

Fiddle

HTML：

<ul class="tree"> <li>Animals <ul> <li>Birds</li> <li>Mammals <ul> <li>Elephant</li> <li class="last">Mouse</li> </ul> </li> <li class="last">Reptiles</li></ul> 

CSS：

ul.tree, ul.tree ul { list-style-type: none; background: #fff url(http://odyniec.net/articles/turning-lists-into-trees/vline.png) repeat-y; margin: 0; padding: 0; } ul.tree ul { margin-left: 10px; } ul.tree li { margin: 0; padding: 0 12px; line-height: 20px; background: url(http://odyniec.net/articles/turning-lists-into-trees/node.png) no-repeat; color: #369; font-weight: bold; } ul.tree li.last { 
    background: #fff url(http://odyniec.net/articles/turning-lists-into-trees/lastnode.png) no-repeat; 
    } 

來源：

http://odyniec.net/articles/turning-lists-into-trees/

Answer 2

<ul> 
<li>John Doe 
    <ul> 
     <li>John Doe's Descendant A</li> 
     <li>John Doe's Descendant B</li> 
    </ul> 
</li> 
<li>Jane Somebody 
    <ul> 
     <li>Jane Somebody's Descendant A</li> 
     <li>Jane Somebody's Descendant B</li> 
    </ul> 
</li> 
</ul> 

編輯：或者一些更多的涉及。

https://jsfiddle.net/hm2uq1zs/

或者：

https://jsfiddle.net/hm2uq1zs/1/