使用CSS

Question

我有一个要通过边界线连接的元素列表。此行应仅限于每个父级，但应触摸该父级的所有子级（对于列表中的每个父级）。从屏幕快照中可以看到，我的问题是我的行从上到下遍历整个页面，并且似乎不符合父级的高度，也没有在每个子级列表停止时中断。

理想情况下，此图片中将有两条单独的行，一条在test1和test2之间，另一条从test2到整个列表的末尾（父行之间有一些缓冲空间，因此它们不会接触）。

有什么想法吗？我已经尝试了几个小时来添加不同的样式，以尝试限制行高，但是没有任何效果。谢谢！

#test ul li ul li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: 50px;
  top: 0;
  bottom: 0;
  max-height: 100%;
  border-left: 1px solid #7A7A7A;
}

<div id="test">
  <ul>
    <li>
      test1
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

使用选择器尝试时，我并没有真正得到您的帮助：

我认为您应该将选择器更改为：#test ul li ul

这将针对下一个html结构

<element id="test">
  …
    <ul>
      …
        <li>
          …
            <ul>
              …

希望这会有所帮助：>

#test ul li ul {
  border-left: 1px solid red;
}

<div id="test">
  <ul>
    <li>
      test1
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

不确定所需的输出，请检查下面的代码，这是否是您要尝试的操作

现在，行是贯穿页面的，因为您的伪元素位于绝对位置，并且没有相对元素，因此默认情况下是相对于正文的，这就是它从上到下运行的原因

    #test ul li ul li {
  position: relative;
}

#test ul li ul li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: -25px;
  top: 0;
  bottom: 0;
  max-height: 100%;
  border-left: 1px solid #7A7A7A;
}

<div id="test">
  <ul>
    <li>
      test1
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

您还可以定位父级列表项并获得相同的功能。

#test > ul >li {
  position:relative;
}
#test > ul >li:before {
  content: "";
  position:absolute;;
  border-left:3px solid black;
  height: 85%;
  top:10px;
  left: -15px;
}

<div id="test">
  <ul>
    <li>
      test1
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
    <li>
      test2
      <ul>
        <li>
          1
        </li>
        <li>
          2
        </li>
        <li>
          3
        </li>
        <li>
          4
        </li>
      </ul>
    </li>
  </ul>
</div>