CSS HTML 子列表项行连接到父项 [英] CSS HTML Sub List Items lines connected to parent

问题描述

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

I currently have a task list that is generated dynamically. Each task displays as a list item, and is working. I am trying to add sub tasks. I was able to add 2 sub tasks statically, but more cannot be added, as the lines connecting to the parent task are static. Is is possible to dynamically add sub tasks here, and have a line connect to the parent for each added sub item?

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>

推荐答案

您可以使用 pseudo 元素来实现这种结构.

You can use pseudo elements to achieve this structure.

我用 <span> 标签包裹了每个孩子，并在其上使用了 ::before 元素.

I have wrapped each child with <span> tag and used ::before element on that.

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>

这篇关于CSS HTML 子列表项行连接到父项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！