CSS 中的层次结构显示

Question

我在为分层显示设计 CSS 时遇到了麻烦，例如文件和文件夹树。我使用嵌套的无序列表：

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

它们在适当的 CSS 减去连接线的情况下可以很好地显示。我需要连接线。我使用以下 CSS 执行此操作：

 ul ul li:before {
  content: "";
  padding: 15px;
  border: 1px solid #000;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 10px;
  position: absolute;
  left: -22px;
  top: -15px;
}

问题是线条与动物、狗和猫的图标重叠。我尝试更改 z-index 无效。有没有更好的方法可以用 CSS 实现这一点？还是有另一种方法让 z-index 有意义？

原文由 at. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

jsFiddle 演示

有一个很棒的过时 在线教程 可以满足您的需求。

它使用 图像 来创建独特的项目符号，但在您的情况下，您可以使用管道（即 | ）符号并指定具有所需颜色的较大字体大小。

截屏：

编辑：

这是一个额外的 jsFiddle，用于复制弯曲的连接线。

jsFiddle 演示 2

编辑 2：

这是一个最终 修订 的 jsFiddle 修订版，它添加了一个转义空间以在保持弯曲连接的同时具有更好的可见性。

jsFiddle 演示 3 和 3b

编辑 3： 这个 特殊 的空格类型是用于上面演示中的 content 属性的一个选项：

 Entity  Name Symbol/Description
      en space

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

编辑 4： 编辑 3 的替代方法是查看为 使用 CSS 内容添加 HTML 实体 提供的 SO Answers。

原文由 arttronics 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

看看这个例子。您可以轻松地用图像替换鲑鱼色框：

HTML

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

CSS

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

演示

原文由 bookcasey 发布，翻译遵循 CC BY-SA 3.0 许可协议