html - 像组织结构图一样显示 HTML 列表

Question

我无法为我的情况生成正确的 CSS。给定以下列表：

<ul>
    <li>Charlie
        <ul>
            <li>Tim
                <ul>
                    <li>Chris</li>
                    <li>Mort</li>
                </ul>
            </li>
            <li>Julia
                <ul>
                    <li>Alice</li>
                    <li>Akuma</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

是否可以像这样在 CSS 中创建布局：

（我不需要连接它们的线，而是盒子的布局）

编辑：

CSS：

ul {
    width:100%;
    float:left;
}
ul li {
    width:100px;
    height:50px;
    float:left
}

然后其他ul li ul li的开始变得混乱。