没有表的多级嵌套列表元素的水平对齐（如TreeView / TreeList）

Question

我希望显示有点类似于具有可扩展行和几个对齐列的表格树视图，即如下所示：

我想自然地将它列出来，作为列表的嵌套列表，例如：

<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/ - 并且正如您所见，所有列都未对齐。

我只能提出两个解决方案，两者都相当丑陋：

1. 用表替换所有内容，最终失去嵌套的DOM结构。

2. 依靠像

   这样丑陋的技巧

   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
   }
   

有没有任何好的方法可以在没有Javascript的情况下在没有Javascript的情况下进行重大更改，并使用一些聪明的CSS技巧？

Answer 1

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

No such property: testResultDirs for class: org.gradle.api.tasks.testing.Test_Decorated

编辑你的小提琴代表解决方案：http://jsfiddle.net/2Lqmx9kt/1/

但是，我很好奇。为什么你想这样做，当有大量的解决方案通过jQuery / Javascript数据处理，即Telerik Kendo UI的TreeList？为什么需要HTML嵌套？