So verbinden Sie Elemente in ungeordneter Liste durch Linien mit HTML

Question

Ich arbeite auf einer Genealogie-Website, wo ich die Nachkommen einer Person in einer ungeordneten und eingerückten Liste unter ihrem Namen anzeigen.

Gibt es eine Möglichkeit, die Kugeln in dieser Liste durch Linien zu verbinden, um einen Stammbaum zu bilden, der nach unten verzweigt und nur HTML verwendet?

Answer 1

Es gibt eine sehr praktische Anleitung dafür. Hier ist die Geige:

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; 
    } 

Quelle:

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> 

Edit: Oder Etwas ein wenig mehr beteiligt.

https://jsfiddle.net/hm2uq1zs/

Oder:

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