ul li vertical multiline - 错误的位置

Question

我有html：

<ul>
    <li>1<br/>01<br/>001
        <ul>
            <li>1.1
                <ul><li>1.1.1</li></ul>
            </li>
            <li>1.2
                <ul><li>1.2.1</li></ul>
            </li>
        </ul>
    </li>
    <li>2<br/>02
        <ul>
            <li>2.1
                <ul><li>2.1.1</li></ul>
            </li>
        </ul>
    </li>
</ul>

和css：

ul { 
    display:inline-block;
    vertical-align: top;
    list-style: none outside none;
}
li {
    vertical-align: top;
    display: block;
    min-width: 100px;
    border: 1px blue solid;
}

http://jsfiddle.net/tss9fLru/2/

如何将1.1,1.1.1,1.2,1.2.1,2.1,2.1.1对齐到他的区块的右上角？

Answer 1

使用此css：

ul { 
    display:table-cell;
    vertical-align: top;
    list-style: none outside none;

}
li {

    vertical-align: top;
    display: table;
    min-width: 100px;
    border: 1px blue solid;
}