CSS + HTML中的家谱，包括配偶，与单个孩子未对齐

Question

我正在使用CSS和HTML处理家谱。我在家谱中找到了TheCodePlayer教程的基本代码。当父母有两个或更多孩子时，一切都很好，花花公子。

但是当你试图让一个父母，一个孩子和他的配偶，线条不对齐。我尝试了一个有人提到的解决方案，你在li标签中放了一个类，但它只适用于树中的最后一个孩子。我也尝试了一些左边填充，如果它是一个独生子女，但它也没有完全发挥作用。

我把所有东西都装在一个小提琴里，可以在这里找到： https://jsfiddle.net/ax7892/r8nbd1wb/2/

我在小提琴中想要的是Example3作为Example1和Example2的唯一子节点对齐。并且示例5作为Example3和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>

由于