在CSS层次显示(Hierarchy display in CSS)

我在未来与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说的吗？

Answer 1:

的jsfiddle演示

有一个伟大的过时的在线教程那不正是你寻找的。

它使用的图像 ，创造出独特的子弹，但在你的情况，你可以使用管道（即| ）符号并指定一个更大的字体大小与所需的颜色。

截图：

编辑：

这是一个额外的jsfiddle复制您的弯曲的连接线。

的jsfiddle演示2

编辑2：

这里是一个最终修订的jsfiddle修订，增加了一个逃脱的空间有更好的可视性，同时保持你的曲线美的连接。

的jsfiddle演示3和图3b

编辑3：这种特殊的空白品种是使用一个选项content在上面的演示性能：

Entity  Name Symbol/Description
      en space

可以肯定的，特殊的空白是空白的3符号下间隔的中间 。 使用需要没有用备选字符加上透明的，以模拟的空白 。 删除透明度属性意味着IE8是幸福的。 为以防万一， 空线之下包含1个特殊空白字符。 复制到剪贴板使用，因为Entity和Name不工作：


编辑4：备用编辑三是检查提供了这么回答添加使用CSS内容的HTML实体 。

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

演示

Answer 3:

如果你想要一个简单的例子，在这里我们去：

HTML

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

CSS

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

见的jsfiddle结果

文章来源: Hierarchy display in CSS