html - 没有表格的多层嵌套列表元素的水平对齐(例如TreeView/TreeList)

我想显示有点像表格树状视图的可扩展行和几个对齐的列，即像这样的东西：



我想自然地将其布置为列表的嵌套列表，即：

<ul>
    <li>
        <span class="first">usr</span>
        <span class="second">root</span>
        <span class="third">drwxr-xr-x</span>
        <ul>
            <li>
                <span class="first">bin</span>
                <span class="second">root</span>
                <span class="third">drwxr-xr-x</span>
                <ul>
                    <li>
                        <span class="first">which → /bin/which</span>
                        <span class="second">root</span>
                        <span class="third">lrwxrwxrwx</span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

虽然通常使用固定了width和display: inline-block的元素来布局这些松散的表格数据，但是，当行的开头由于嵌套级别不同而未对齐时，显然不起作用。

我当前的尝试在http://jsfiddle.net/2Lqmx9kt/上可用-如您所见，所有列均未对齐。

我只能提出2个解决方案，两者都相当难看：


用表替换所有内容，最终丢失嵌套的DOM结构。
依靠像

ul > li > span.first {
    // full width
}
ul > li > ul > li > span.first {
    // remove one level of width
}
ul > li > ul > li > ul > li > span {
    // remove two levels of width
}

在没有DOM的重大更改，没有Javascript以及一些巧妙的CSS技巧的情况下，是否有什么好的布局方法？

最佳答案

您可以在嵌套元素的第二个跨度上使用负边距执行此操作：

ul ul li .second {
    margin-left: -2.5em;
}

ul ul ul li .second {
    margin-left: -5em;
}

也编辑了小提琴以表示解决方案：http://jsfiddle.net/2Lqmx9kt/1/

我很好奇。当有许多解决方案可以通过jQuery / Javascript数据处理（例如Telerik Kendo UI的TreeList）来执行此操作时，为什么要这样做呢？为什么需要HTML嵌套？

关于html - 没有表格的多层嵌套列表元素的水平对齐(例如TreeView/TreeList)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28344863/