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

问：

我追求 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 中实现嵌套左边距效果？编辑：这必须适用于无限数量的嵌套级别。

html css html-lists 嵌套列表

评论

0赞 dippas 8/25/2018

到目前为止，您尝试过什么？这不是服务代码站点

0赞 ptrcao 8/25/2018

@dippas：我尝试过的唯一解决方案类似于下面 thebrownkid 的答案，但它不适用于未指定数量的嵌套级别。正确解决方案的天才将能够在没有 PHP/JS 的情况下反复加强左边框，但只能使用 CSS

答：

1赞 Salvatore 8/25/2018 #1

您可以使用左边框样式来实现您想要的内容。

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

1）获取带边框的无限嵌套列表

添加上述样式，该样式将分别针对父级和所有子级 ul，以提供左边框。ul

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

由于向父元素添加边框也会增加子元素的边框。如果您没有不同的边框，这应该没问题。

2） 获取列表的自定义边框 -

基本上，我删除了列表的所有填充，即然后将和另一个添加到 .ul20pxborder-leftparent list20pxborder-leftchild list

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

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

父级和子级的工作片段如下 -

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. 向父元素添加边框会增加子元素的边框，无论如何您都必须理解。

评论

0赞 ptrcao 8/25/2018

有没有办法为无限数量的嵌套级别执行此操作，而无需为每个嵌套级别提供显式类？

1赞 Salvatore 8/26/2018

我已经更新了我的帖子以满足您的条件@ptrcao。我希望它有所帮助！

0赞 Salvatore 8/27/2018

@ptrcao 别忘了接受答案。祝您编码愉快！

上一个：在 CSS 中设置宽度的嵌套列表意外块定位

下一个：ReactJS+MaterialUI v1 自动嵌套列表填充