Html 仅使用 CSS 显示树列表的最佳方法（无图像或 JS，内部示例）

Best method for displaying a tree list using CSS only (no images or JS, example inside)

提问by meiryo

I want to display something like this on a HTML page:

我想在 HTML 页面上显示这样的内容：

With the restriction of using only CSS. The main problem lies in making these:｜└ ├"branches".

仅限使用 CSS 的限制。主要问题在于制作这些：｜└ ├“分支”。

The example above was a solution I done myself. Each branch has the same width and consists of:

上面的例子是我自己做的一个解决方案。每个分支具有相同的宽度，包括：

<ul>
    <li></li>
    <li></li>
</ul>

The trick is to turn the borders of <li>black accordingly. An image to show this (just a quick mock up)

诀窍是相应地转动<li>黑色的边界。显示此图像的图像（只是一个快速模型）

A problem I've encountered is turning the border white to match the background instead of transparent (apparently CSS has some problem with transparent borders on lists).

我遇到的一个问题是将边框变成白色以匹配背景而不是透明（显然 CSS 在列表上的透明边框存在一些问题）。

My question is: what's the most simplest solution? Is there a better way to do this?

我的问题是：最简单的解决方案是什么？有一个更好的方法吗？

EDIT: Some requirements:

编辑：一些要求：

• The branch must have fixed width but the height must grow accordingly with the height of the table cell.
• The two lielements must take up half of the row's height each such that the -in ├will always be in the middle.

• 分支必须具有固定的宽度，但高度必须随着表格单元格的高度相应地增长。
• 这两个li元素必须各自占据行高的一半，这样-in├将始终位于中间。

EDIT2: http://en.wikipedia.org/wiki/Template:Tree_listdid a little research. Alas, they use images for branches.

EDIT2：http: //en.wikipedia.org/wiki/Template: Tree_list做了一些研究。唉，他们使用图像作为分支。

PS: As requested http://jsfiddle.net/q3zdB/2/

PS：根据要求http://jsfiddle.net/q3zdB/2/

回答by David says reinstate Monica

The best I can come up with for this is some (unfortunately regrettable) nesting and use of generated content (so it does require a pretty up-to-date browser, so IE < 8isn't going to look terribly pretty), however, that said, given the HTML:

我能想到的最好的是一些（不幸的是令人遗憾的）嵌套和使用生成的内容（所以它确实需要一个非常最新的浏览器，所以IE < 8不会看起来非常漂亮），但是，也就是说，给定 HTML：

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
}
li {
  list-style-type: none;
  border-left: 2px solid #000;
  margin-left: 1em;
}
li div {
  padding-left: 1em;
  position: relative;
}
li div::before {
  content:'';
  position: absolute;
  top: 0;
  left: -2px;
  bottom: 50%;
  width: 0.75em;
  border: 2px solid #000;
  border-top: 0 none transparent;
  border-right: 0 none transparent;
}
ul > li:last-child {
  border-left: 2px solid transparent;
}

<ul>
  <li><div>Level 1</div></li>
  <li><div>Level 1</div>
    <ul>
      <li><div>Level 2</div></li>
      <li><div>Level 2</div>
        <ul>
          <li><div>Level 3</div></li>
          <li><div>Level 3</div></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><div>Level 1</div></li>
</ul>

We get this:

我们得到这个：

JS Fiddle demo

JS小提琴演示

回答by Web_Designer

Here's a fork of David's solution eliminating the need for the extra <div>in each <li>:

这是 David 解决方案的一个分支，消除了<div>每个解决方案中的额外需求<li>：

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
}
li {
  border-left: 2px solid #000;
  margin-left: 1em;
  padding-left: 1em;
  position: relative;
}
li li {
  margin-left: 0;
}
li::before {
  content:'┗';
  color: #000;
  position: absolute;
  top: -5px;
  left: -9px;
}
ul > li:last-child {
  border-left: 2px solid transparent;
}

<ul>
  <li>Level 1</li>
  <li>Level 1
    <ul>
      <li>Level 2</li>
      <li>Level 2
        <ul>
          <li>Level 3</li>
          <li>Level 3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 1</li>
</ul>

Demo on JS Bin

JS Bin 上的演示