Question

我正在尝试在纯CSS中创建一个带缩进的树。我一直在尝试使用类似的东西：

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

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

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

最终，我想创建基本上看起来像这样的东西：

tree example

任何想法如何在纯CSS中做到这一点？感谢最简单的答案。

Answer 1

简单，具有多级深度支持

更新：调整以适应悬停

不需要额外的HTML，因为css选择器链接不必限制深度，因为它支持任意数量的级别，而不必为这些级别调整你的css（没有跟踪“填充”到设置在下一层深。）

这只适用于两个小的限制（我认为不会影响你）。

See fiddle demo.

向position: relative添加ul.tree，但要将所有子元素保留为默认static位置。然后更改/添加以下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;
}

限制是没有子元素可以设置位置，并且我们使用的是伪元素（这意味着它不能用于其他某些功能，但这可能不是问题）。

Answer 2

对于深度未知的列表，我使用绝对定位的元素来分隔线条。它增加了一些额外的标记，但似乎有效。

div.separator {
    position:absolute;
    left:0px;
    right:0px;
    border-top:1px solid lightgray;
}

<ul class="tree">
    <li><a>Item1</a><div class="separator"></div></li>
    <li><a>Item2</a><div class="separator"></div>
        <ul>
            <li><a>Item3</a><div class="separator"></div></li>
            <li><a>Item4</a><div class="separator"></div></li>
            <li><a>Item5</a><div class="separator"></div>
                <ul>
                    <li><a>Item6</a><div class="separator"></div></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

http://jsfiddle.net/7u87c/20/

Answer 3

这个CSS使嵌套li内的链接有padding-left 30px，我添加另一个嵌套li链接padding-left: 60px。

ul.tree li ul li a {
    padding-left: 30px;
}

ul.tree li ul li ul li a {
    padding-left: 60px;
}

http://jsfiddle.net/7u87c/5/

Answer 4

没有额外的标记和图标图像的使用。

基于内容非常简单和动态。

示例HTML：

<ul class="tree">
    <li><span>public</span></li>
    <li><span>server.js</span></li>
    <li>
        <span>server</span>
        <ul>
            <li><span>webfs</span></li>
        </ul>
    </li>
    <li><span>specs</span></li>
    <li>
        <span>src</span>
        <ul>
            <li>
                <span>core</span>
                <ul>
                    <li><span>CellAddress.js</span></li>
                </ul>
            </li>
        </ul>
     </li>
</ul>

CSS：

ul.tree {
  border-top: 1px solid grey;
}

ul.tree, ul.tree ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul span {
    display: block;
    padding-left: 25px;
    border-bottom: 1px solid #666;
    height: 25px;
    line-height: 25px;
    background: url("http://lorempixel.com/10/8/") no-repeat scroll 5px 8px transparent;
}

ul ul span {
    padding-left: 35px;
    background-position: 15px 8px; 
}

ul ul ul span {
    padding-left: 45px;
    background-position: 25px 8px;
}

请see example

注意：您可以将spans转换为a代码

与边界的纯净的css树

4 个答案:

简单，具有多级深度支持