CSS HTML 子列表项连接到父项的行答案

【问题标题】：CSS HTML Sub List Items lines connected to parentCSS HTML 子列表项连接到父项的行
【发布时间】：2020-09-02 13:57:30
【问题描述】：

我目前有一个动态生成的任务列表。每个任务显示为一个列表项目，并且正在工作。我正在尝试添加子任务。我能够静态添加 2 个子任务，但无法添加更多，因为连接到父任务的线路是静态的。是否可以在此处动态添加子任务，并为每个添加的子项与父项连接一条线？

ul {
  list-style: none;
}

ul.main::before {
  content: "";
  border: solid 2px black;
  border-width: 0 0 0 2px;
  position: absolute;
  height: 160px;
  margin-left: 10px;
  z-index: -1;
}

.items::before {
  display: inline-block;
  content: "";
  border: solid 2px black;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  background: white;
}

.subitems1,
.subitems2 {
  margin-left: 50px;
  border: solid 2px white;
  text-align: center;
  width: 150px;
}

.subitems1::before {
  position: absolute;
  display: inline-block;
  content: "";
  border: solid 2px black;
  border-width: 0px 0px 2px 2px;
  border-radius: 0 25px;
  width: 54px;
  height: 25px;
  margin-left: -110px;
  margin-top: -10px;
}

.subitems2::before {
  position: absolute;
  display: inline-block;
  content: "";
  border: solid 2px black;
  border-width: 0px 0px 2px 2px;
  border-radius: 0 25px;
  width: 63px;
  height: 50px;
  margin-left: -115px;
  margin-top: -40px;
}

<ul class="main">
  <li class="items">Task 1</li>
  <li class="items">Task 2
    <ul>
      <li class="subitems1">Sub Task 1</li>
      <li class="subitems2">Sub Task 2</li>
    </ul>
  </li>
  <li class="items">Task 3</li>
</ul>

【问题讨论】：

标签： html css html-lists sublist items

【解决方案1】：

你可以使用pseudo元素来实现这个结构。

我已经用<span> 标签包裹了每个孩子，并在上面使用了::before 元素。

ul {
  list-style: none;
}

ul.sub-menu {
  position: relative;
  padding: 0;
  margin-left: 30px;
  margin-top: 10px;
}

li.item span {
  position: relative;
}


ul.sub-menu li.item span::before {
  content: '';
  height: 100%;
  width: 10px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  position: absolute;
  bottom: 10px;
  left: -10px;
  z-index: -1;
}

<ul class="main">
  <li class="items">Task 1</li>
  
  <li class="items">Task 2
    <ul class="sub-menu">
      <li class="item"><span>Sub Task 1</span></li>
      
      <li class="item"><span>Sub Task 2</span>
        <ul class="sub-menu">
          <li class="item"><span>Sub Task 1</span></li>
          <li class="item"><span>Sub Task 2</span></li>
        </ul>
      </li>
      
    </ul>
  </li>
  
  <li class="items">Task 3</li>
</ul>

【讨论】：

感谢您的帮助。有了你的 cmets，我就能让它工作了。