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有意义吗？

Answer 1

查看此示例。您可以使用图像轻松替换鲑鱼色的盒子：

file structure with css example

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

Demo

Answer 2

jsFiddle Demo

有一个伟大的约会online tutorial完全符合您的要求。

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

<强>截图：

编辑：

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

jsFiddle Demo 2

编辑2：

这是最终的修订 jsFiddle修订版，它添加了一个转义空间，以便在保持曲线连接的同时提高可见度。

jsFiddle Demo 3和3b

编辑3：此特定空白区域变体是上述演示中用于content属性的选项：

Entity  Name Symbol/Description
&#8194; &ensp;   en space

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

编辑4：编辑3的替代方法是查看为Adding HTML entities using CSS content提供的SO答案。

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 result

CSS中的层次结构显示

3 个答案:

HTML

CSS

Demo