HTML/CSS嵌套左边框：重复视觉效果

Question

我正在寻找对 HTML 列表的嵌套 border-left 效果。注意列表的每一层嵌套，左边框如何侵占一步：

严格来说更像是这样，所列术语和项目符号之间没有太大差距：

这里有一个最简单的例子：

<ul style="list-style-type:none">
  <li>RPG
    <ul style="list-style-type:none">
      <li>DA</li>
      <li>Bioshock</li>
    </ul>
  </li>
  <li>MOBA
    <ul style="list-style-type:none">
      <li>DOTA</li>
      <li>LoL</li>
    </ul>
  </li>
</ul>

请问如何在HTML/CSS中实现嵌套的左边距效果？ 编辑：这必须适用于无限的、开放式的嵌套层数。

Answer 1

您可以使用border-left样式来实现您想要的。

编辑 - 在评论中回答 OP 的问题

1) To get infinity nested lists with borders

将上述样式添加到 ul，这将针对父 ul 和所有子 ul 分别给出一个 border-left。

ul {
    border-left: 20px solid #000;
}

因为向父元素添加 border-left 也会增加子元素的边框。如果您没有不同的边框，这应该没问题。

2) To get custom borders for lists -

基本上，我删除了列表的所有填充，即 ul，然后将 20px border-left 添加到 parent list 和另一个 20px border-left 到 child list.

对于 grand-child ul 过程是相同的，如果你给 ul 类名 -> grand-child，css 看起来像-

ul.grandchild li {
    border-left: 30px solid #000;
}

使用 parent 和 child ul 的工作片段如下 -

ul {
  list-style-position: none;
  padding-left: 0;
}


/*
for different border sizes

ul.parent li {
  border-left: 20px solid #000; 
}

ul.child li {
  border-left: 20px solid #000;
}
*/

/* for all ul's with same radius, don't need any specific class */
ul {
  border-left: 20px solid #000;
}

<ul class="parent">
  <li>RPG
    <ul class="child">
      <li>DA</li>
      <li>Bioshock</li>
      <li>
        <ul>
          <li>DA</li>
          <li>Bioshock</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>MOBA
    <ul class="child">
      <li>DOTA</li>
      <li>LoL</li>
    </ul>
  </li>
</ul>

P.S。给父元素添加border-left会增加子元素的border，这个你肯定已经明白了。

HTML/CSS嵌套左边框：重复视觉效果

HTML/CSS nested left border: reiterative visual effect

html

css

nested-lists

html-lists