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

解决方案

。

I'm having trouble coming up with CSS for a hierarchical display, like a tree of files and folders. I use nested unordered lists:

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

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?

解决方案

jsFiddle Demo

There's a great dated online tutorial that does exactly what your looking for.

It used images to 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 Demo 2

EDIT 2:

Here is a final revised jsFiddle revision that adds an escaped space to have better viewability while maintaining your curvy connections.

jsFiddle Demo 3 and 3b

EDIT 3: This particular blank space variety is an option to use for content property in the demo above:

Entity  Name Symbol/Description
      en space

To be sure, the special blank space is the middle of 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 below contains 1 single special blank space character. Copy to the clipboard to use, as Entity and Name do not work:
 

EDIT 4: Alternate for Edit 3 is to check out SO Answers provided for Adding HTML entities using CSS content.

这篇关于CSS中的层次结构显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！