Html CSS中的层次结构显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14034861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hierarchy display in CSS
提问by at.
I'm having trouble coming up with CSS for a hierarchical display, like a tree of files and folders. I use nested unordered lists:
我在为分层显示（例如文件和文件夹树）提出 CSS 时遇到了麻烦。我使用嵌套的无序列表：
<ul>
<li>animals<ul>
<li>dogs</li>
<li>cats</li>
</ul></li>
</ul>
They display nicely with the proper CSS minus the connecting lines. I need the lines to connect. I do this with the following CSS:
使用适当的 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;
}
Problem is the lines overlap the icons for the animals, dogs and cats. I tried changing z-index's to no effect. Is there a better way to achieve this with CSS? Or is there another way to get the z-index making sense?
问题是线条与动物、狗和猫的图标重叠。我尝试将 z-index 更改为无效。有没有更好的方法来用 CSS 实现这一点？还是有另一种方法可以使 z-index 有意义？
采纳答案by arttronics
There's a great dated online tutorialthat does exactly what your looking for.
有一个很棒的过时的在线教程，可以完全满足您的需求。
It used imagesto create unique bullets but in your case you can use pipe (i.e., |) symbol and specify a larger font-size with desired color.
它使用图像来创建独特的项目符号，但在您的情况下，您可以使用管道（即|）符号并使用所需颜色指定更大的字体大小。
Screenshot:
截屏：
EDIT:
编辑：
Here is an extra jsFiddle duplicating your curved connecting lines.
这是一个额外的 jsFiddle 复制您的弯曲连接线。
EDIT 2:
编辑2：
Here is a final revisedjsFiddle revision that adds an escaped space to have better viewability while maintaining your curvy connections.
这是最终修订的jsFiddle 修订版，它添加了一个转义空间以在保持弯曲连接的同时具有更好的可见性。
EDIT 3:This particularblank space variety is an option to use for contentproperty in the demo above:
编辑 3：这个特殊的空白空间是content上面演示中用于属性的一个选项：
Entity Name Symbol/Description
    ? en space
To be sure, the special blank space is the middleof the 3 blank spaced under Symbol. Using that requires no use of alternate character plus transparency to simulate blank space. Dropping transparency property means IE8 is happy. Just in case, the empty line belowcontains 1 single special blank spacecharacter. Copy to the clipboard to use, as Entityand Namedo not work:
?
EDIT 4:Alternate for Edit 3 is to check out SO Answers provided for Adding HTML entities using CSS content.
可以肯定的是，特殊空格是Symbol 下的3 个空格的中间。使用它不需要使用替代字符加上透明度来模拟空白。删除透明度属性意味着 IE8 很高兴。以防万一，下面的空行包含 1 个特殊的空格字符。复制到剪贴板使用，因为Entity和Name不工作：
？
编辑 4：编辑 3 的替代方法是查看为使用 CSS 内容添加 HTML 实体提供的 SO 答案。
回答by bookcasey
Check out this example. You could easily replace the salmon colored box with images:
看看这个例子。您可以轻松地用图像替换鲑鱼色框：
HTML
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
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
演示
回答by Jasdeep Khalsa
If you want a simplistic example, here we go:
如果你想要一个简单的例子，我们去：
HTML
HTML
<ul>
<li>animals
<ul>
<li>dogs</li>
<li>cats</li>
</ul></li>
</ul>?
CSS
CSS
li {
border-left: 1px solid #000;
margin-left: 10px;
margin-top: 5px;
padding-left: 10px;
}?
See jsFiddle result
