如何使用 HTML 按行连接无序列表中的项目

Question

我在一个家谱网站上工作，在该网站上，我在一个人的名字下方以无序和缩进列表的形式显示一个人的后代。

有没有办法仅使用 HTML 将此列表中的项目符号逐行连接起来，以形成向下分支的家谱？

Answer 1

<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/

Answer 2

对此有一个非常方便的指南。这是 fiddle:

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/

如何使用 HTML 按行连接无序列表中的项目

How to connect items in unordered list by lines using HTML

html

graph-theory

graph