Question

我正在一个家谱网站上工作，我在他们名字下面的无序和缩进列表中显示一个人的后代。

有没有办法按行加入此列表中的项目符号，以便仅使用HTML形成向下分支的族树？

Answer 1

有一个非常方便的指南。这是小提琴：

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/

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

2 个答案: