Html CSS中的层次显示

我很难用CSS来实现分层显示，比如文件和文件夹树。我使用嵌套无序列表：

<ul>
  <li>animals<ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>

问题是这些线条与动物、狗和猫的图标重叠。我试着把z索引改成无效。有没有更好的方法用CSS实现这一点？或者有没有其他方法可以让z指数有意义？

有一个很棒的约会，正是你想要的

它使用图像来创建独特的项目符号，但在您的情况下，您可以使用管道（即

|

）符号，并使用所需的颜色指定更大的字体大小

屏幕截图：

编辑：

这里有一个额外的JSFIDLE复制您的曲线连接线

编辑2:

这里是最后一个修订版jsiddle修订版，它添加了一个转义空间，以便在保持曲线连接的同时具有更好的可视性

及

编辑3:在上面的演示中，这个特殊的空白区域变体是用于

内容

属性的选项：

实体名称符号/描述
  &ensp；  太空

可以肯定的是，特殊的空格是符号下3个空格的中间部分。使用它不需要使用替代字符和透明度来模拟空白。删除透明度属性意味着IE8很高兴。以防万一，下面的空行包含一个特殊空格字符。复制到剪贴板以使用，因为

实体

和

名称

不起作用：
 

---

编辑4:编辑3的另一种选择是签出所提供的答案。

如果您想要一个简单的示例，我们来：

HTML

<ul>
  <li>animals
   <ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>​

---

请参见此示例。您可以轻松地用图像替换三文鱼色的框：

HTML

---

z-index

仅适用于位置相对、绝对或固定的元素。确保你不想重叠的东西也是相对的或绝对定位的。你所说的“连接线路”是什么意思。我在代码中也看不到任何图标。@bookcasey-我将检查

位置属性。没有包括图标的CSS来简化事情，但是它们是
元素的
背景图像。刚刚检查过，
li
元素和
：之前的
元素分别有
相对
和
绝对
的
位置，但是z-index仍然不起作用。很好，我正在寻找的。有些情况会导致线路偏离，我忘了它们是什么。。。我想如果目录中有一个文件夹，后面跟着一个文件？我本想给你这个荣誉的，但这个问题的获胜者给了我一个很好的线索来解决所有的情况。我真的很喜欢这个例子，但是bootstrap毁了我。所以我创建了一个与引导兼容的，只需要div中有一个类：
<ul>
  <li>animals
   <ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>​

li {
  border-left: 1px solid #000;
  margin-left: 10px;
  margin-top: 5px;
  padding-left: 10px;
}​

<div>
    <h3>Root</h3>
    <ul>        
      <li>Folder 1
        <ul>
            <li>Folder 2
                <ul>
                    <li>file1.xml</li>
                    <li>file2.xml</li>
                    <li>file3.xml</li>
                </ul>
            </li>
            <li>file.html</li>
          </ul>
      </li>
      <li>file.psd</li>
      <li>file.cpp</li>
    </ul>
</div>

body {
    margin: 20px;
    line-height: 3;
    font-family: sans-serif;

}

div {
    position: relative;
}

ul {
    text-indent: .5em;
    border-left: .25em solid gray;
}

ul ul {
    margin-top: -1.25em;
    margin-left: 1em;

}

li {
    position: relative;
    bottom: -1.25em;
}

li:before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 0;
    position: relative;
    left: -.75em;
    border-top: .25em solid gray;
}

ul ul:before, h3:before, li:after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    background: salmon;
    border: .25em solid white;
    top: 1em;
    left: .4em;
}

h3 {
    position: absolute;
    top: -1em;
    left: 1.75em;
}

h3:before {
    left: -2.25em;
    top: .5em;
}