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

Question

我想显示有点类似于带有可扩展行和多个对齐列的表格 TreeView ，即如下所示:

我想自然地布局它，作为列表的嵌套列表，即类似于:

<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 个解决方案，都相当丑陋:

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;
}

也编辑了您的 fiddle 以表示解决方案:http://jsfiddle.net/2Lqmx9kt/1/

不过我很好奇。当有大量解决方案通过 jQuery/Javascript 数据处理(即 Telerik Kendo UI 的 TreeList)执行此操作时，您为什么要这样做？ ？为什么需要 HTML 嵌套？