与边界的纯css树 [英] Pure css tree with borders

问题描述

我想在纯CSS中创建一个带缩进的树。我一直在尝试使用像：

  ul.tree ul {
 padding-left：5px; 
} 
  

但是我想在列表中的每个项目之间分开。如果我使用上面的代码，分隔条会缩进，所以不太好。

这是我当前的代码（我做直接在js缩进，不喜欢）：

code>到 ul.tree ，但保留所有的子元素为默认 static / code>位置。然后改变/添加以下css：

  ul.tree a {
 display：block; 
 height：30px; 
 line-height：30px; 
 padding-left：15px; 
} 
 
 / *这是使我们的底部边框，但调整.tree ul宽度* / 
 ul.tree a：before {
 content：' '; 
 height：30px; / *匹配您的< 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; / *这是每个级别的间距* / 
} 
 
 ul.tree a：hover：before {
 background-color：#DDDDDD; 
} 
  

限制是没有子元素可以设置位置，一个伪元素（这意味着它不能用于一些其他功能，但这可能不是一个问题）。

I am trying to create a tree with indentations in pure CSS. I have been trying using something like:

ul.tree ul {
  padding-left: 5px;
}

However I would like to have a separation between each item in the list. If I use the code above the separating bar gets indented as well so it's not too good.

Here is my current code (I do the indent directly in js, which I don't like): jsfiddle

Ultimately, I want to create something that basically looks like that:

Any idea how to do this in pure CSS? kudos for the simplest answers.

解决方案

Simple with Multi-level Depth Support

UPDATED: Tweaked to accommodate hover

No extra HTML needed, no having to limit depth because of css selector chaining, as it supports any number of levels deep without having to adjust your css at all for those levels (no keeping track of "padding" to set on the next level deep).

This works well with only a two minor limitations (which I don't believe will factor into affecting you).

See fiddle demo.

Add a position: relative to your ul.tree, but keep all the child elements the default static position. Then change/add the following 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;
}

The limitations are that no child elements can have a position set and we are using a pseudo-element (which means it cannot be used for some other feature, but that is probably not an issue either).

这篇关于与边界的纯css树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！