html - 没有表格的多级嵌套列表元素的水平对齐（如 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
   }
   

有没有什么好的方法可以在没有 DOM 的重大变化、没有 Javascript 和一些巧妙的 CSS 技巧的情况下进行布局？

Answer 1

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

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 嵌套？