html – 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有意义? 解决方法
jsFiddle Demo
有一个伟大的日期online tutorial,完全符合你的要求。 它使用图像创建唯一的项目符号,但在您的情况下,您可以使用管道(即|)符号,并使用所需的颜色指定较大的字体大小。 截图: 编辑: 这是一个额外的jsFiddle复制您的曲线连接线。 jsFiddle Demo 2 编辑2: 这是最后修订的jsFiddle修订版本,它增加了一个转义空间,以便在保持曲线连接的同时具有更好的可见性。 jsFiddle Demo 3和3b 编辑3:这个特定的空白空间是上述演示中用于内容属性的选项: Entity Name Symbol/Description     ? en space 可以肯定的是,特殊的空格是Symbol下面3个空格间隔的中间。使用它不需要使用替代字符加透明度来模拟空格。降低透明度属性意味着IE8很开心。以下情况下,下面的空行包含1个单独的特殊空白字符。复制到剪贴板使用,因为实体和名称不起作用: 编辑4:替代编辑3是检查提供Adding HTML entities using CSS content的答案。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |