我试图在纯CSS中创建一个带缩进的树.我一直在尝试使用类似的东西： ul.tree ul { padding-left: 5px;} 但是我想在列表中的每个项目之间进行分隔.如果我使用上
... . . 我试图在纯CSS中创建一个带缩进的树.我一直在尝试使用类似的东西：
ul.tree ul { padding-left: 5px;} 但是我想在列表中的每个项目之间进行分隔.如果我使用上面的代码,分隔栏也会缩进,所以它不太好.
这是我当前的代码(我直接在js中进行缩进,我不喜欢)：jsfiddle
最终,我想创建一些基本上看起来像这样的东西：
任何想法如何在纯CSS中做到这一点？感谢最简单的答案.
.解决方法
. 简单的多级深度支持
更新：调整以适应悬停
不需要额外的HTML,因为css选择器链接不必限制深度,因为它支持任意数量的级别,而不必为这些级别调整你的css(没有跟踪“填充”以设置在下一级别深).
这只适用于两个小的限制(我不相信会影响你).
See fiddle demo.
添加一个位置：相对于你的ul.tree,但保持所有子元素的默认静态位置.然后更改/添加以下css：
ul.tree a { display: block; height:30px; line-height: 30px; padding-left: 15px;}/* this is making our bottom border,but sizing off the .tree ul width */ul.tree a:before { content: ''; height: 30px; /* match your <a> height */ position: absolute; left: 0; right: 0; z-index: -1; border-bottom-width: 1px; border-bottom-color: lightgray; border-bottom-style: solid;}ul.tree a + ul { padding-left: 15px; /* this is your spacing for each level */}ul.tree a:hover:before { background-color: #DDDDDD;} 限制是没有子元素可以有一个位置集,我们正在使用一个伪元素(这意味着它不能用于其他一些功能,但这可能也不是问题).
. . .. ...