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が混乱し始めます。