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

【问题标题】：How to connect items in unordered list by lines using HTML如何使用 HTML 按行连接无序列表中的项目
【发布时间】：2016-06-10 05:10:57
【问题描述】：

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

有没有办法将这个列表中的项目符号逐行加入，以形成一个向下分支的家谱，只使用 HTML？

【问题讨论】：

所以你基本上需要一个嵌套列表？
所以您想在列表中的所有项目符号点之间画一条线？
你不能只用 HTML 做到这一点。你必须通过 CSS 来完成，而且可能很多......看看这里以获得灵感：stackoverflow.com/a/17629815/4315724

标签： html graph graph-theory

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：