Question

是否可以在<li>中元素的每个缩进处绘制缩进指南（U + 250B）？例如，我正在使用this fiddle，并且希望在Child 1，Child 2的左侧绘制缩进指南，并在Child Child 1的左侧绘制两个指南（因为它是两个深度缩进）

我对Javascript或CSS解决方案持开放态度，但如果解决方案更简单，我更喜欢CSS。

Answer 1

为所有UL添加边距而不是第一个，然后添加padding-left以将内容移离边框并向UL添加border-left。

ul {margin:0 40px;border-left:3px dashed black;padding-left:20px}
#nav-bar > ul {margin:0;border:0}

http://jsfiddle.net/Ar88e/6/

Answer 2

使用:before伪类

li li:before {
    content:'\250B';
    display:inline;
    float:left;
}
li li li:before {
    content:'\250B\250B';
    display:inline;
    float:left;
}

Fiddle Demo

Answer 3

这就是我如何使用灵活的CSS样式来实现#nav-bar ul内的任何li。

这是css：

#nav-bar ul li {
    border-left: 1px dotted black;
    border-bottom: 1px dotted black;
    padding-bottom: 5px;
    padding-left: 10px;
}

最后，小提琴：Demo

在lis上设置宽度：Demo

在<li> </li>的每个缩进处绘制缩进指南

3 个答案: