0

i am working on a family tree with CSS and HTML. I have found the base code from 'TheCodePlayer's tutorial on family tree. It all works fine and dandy, when parents have two or more children.

But when you try to have a parent, with a single child and his spouse, the lines misalign. I have tried a solution someone mentioned, where you put a class inside the li tag, but it only works for the last child in the tree. I have also tried some left padding, if it is an only child, but it also didn't fully work.

I have packed everything in a fiddle, available here: https://jsfiddle.net/ax7892/r8nbd1wb/2/

What i want in the fiddle is that the Example3 is aligned as an only child to Example1 and Example2. And Example 5 as an only child to Example3 and Example4.

<div class="tree">
    <ul>
        <li>
            <a href="#">Example1</a><a href="#">Example2</a>
            <ul>

                <li>
                    <a href="#">Example3</a><a href="#"> Example4</a>
                    <ul>
                        <li>
                            <a  href="#">Example5</a>
                        </li>

                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Thanks

Z3br3
  • 37
  • 8

0 Answers0