树状结构为嵌套的ul li

Question

我从订单列表下面做了一个树状的结构.输出看起来像这样

问题是图像中的红色圆圈.所以如果我没有任何进一步的水平但是显示出来,我不想显示那条线.我无法解决这个问题.

显示线条的css如下

li::before {
    content: '';
    position: absolute;
    height: 1px;
    background: #666;
    top: 11px;
    width: 30px;
    left: -17px;
}

ul.child::before {
    content: '';
    position: absolute;
    width: 1px;
    background: #666;
    top: -9px;
    bottom: 10px;
    left: -14px;
}

我的html结构如下

<ul class="tree">
<li id="" class="has-children showChildren">
    <i class="fi-minus"></i>

    <div class="checkBoxDesign">
        <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509197182534205xy9w" value="8587509197182534205xy9w">
        <label for="t_8587509197182534205xy9w"></label>
    </div>
    <span class="text">Sand</span>
    <ul class="child">
        <li id="8587509198220874655a1s8" class="has-children showChildren">
            <i class="fi-minus"></i>
            <div class="checkBoxDesign">
                <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198220874655a1s8" value="8587509198220874655a1s8">
                <label for="t_8587509198220874655a1s8"></label>
            </div>
            <span class="text">Fyllgrus</span>
            <ul class="child">
                <li id="8587496127195835630dojv" class="has-children showChildren">
                    <i class="fi-minus"></i>
                    <div class="checkBoxDesign">
                        <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496127195835630dojv" value="8587496127195835630dojv">
                        <label for="t_8587496127195835630dojv"></label>
                    </div>

                    <span class="text">sub sub sub sub</span>
                    <ul class="child">
                        <li id="8587496127026996853ltmu">
                            <i class="leafNodes"></i>
                            <div class="checkBoxDesign">
                                <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496127026996853ltmu" value="8587496127026996853ltmu">
                                <label for="t_8587496127026996853ltmu"></label>
                            </div>

                            <span class="text">sub sub</span>
                        </li>
                    </ul>
                </li>
                <li id="8587496924061602638qkdo" class="has-children showChildren">
                    <i class="fi-minus"></i>
                    <div class="checkBoxDesign">
                        <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496924061602638qkdo" value="8587496924061602638qkdo">
                        <label for="t_8587496924061602638qkdo"></label>
                    </div>
                    <span class="text">sub sub</span>
                    <ul class="child">
                        <li id="8587496231036093626v5ql">
                            <i class="leafNodes"></i>
                            <div class="checkBoxDesign">
                                <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496231036093626v5ql" value="8587496231036093626v5ql">
                                <label for="t_8587496231036093626v5ql"></label>
                            </div>

                            <span class="text">sub sub sub</span>
                        </li>
                    </ul>

                </li>
            </ul>

        </li>
        <li id="8587509198127281697em9f">
            <i class="leafNodes"></i>
            <div class="checkBoxDesign">
                <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198127281697em9f" value="8587509198127281697em9f">
                <label for="t_8587509198127281697em9f"></label>
            </div>

            <span class="text">Siltholdig</span>
        </li>
    </ul>
</li>

这是一个小提琴,以某种方式显示问题 https://jsfiddle.net/8s48m07a/5/

Answer 1

为你尝试了一个最小的完整模型.看看这个:

* {margin: 0; padding: 0; list-style: none;}
ul li {
  margin-left: 15px;
  position: relative;
  padding-left: 5px;
}
ul li::before {
  content: " ";
  position: absolute;
  width: 1px;
  background-color: #000;
  top: 5px;
  bottom: -12px;
  left: -10px;
}
body > ul > li:first-child::before {top: 12px;}
ul li:not(:first-child):last-child::before {display: none;}
ul li:only-child::before {
  display: list-item;
  content: " ";
  position: absolute;
  width: 1px;
  background-color: #000;
  top: 5px;
  bottom: 7px;
  height: 7px;
  left: -10px;
}
ul li::after {
  content: " ";
  position: absolute;
  left: -10px;
  width: 10px;
  height: 1px;
  background-color: #000;
  top: 12px;
}

<ul>
  <li>
    Item 1
    <ul>
      <li>
        Item 1-1
        <ul>
          <li>Item 1-1-1</li>
          <li>Item 1-1-2</li>
          <li>Item 1-1-3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Item 2
    <ul>
      <li>Item 2-1</li>
      <li>Item 2-2</li>
      <li>Item 2-3</li>
    </ul>
  </li>
  <li>
    Item 3
    <ul>
      <li>Item 3-1</li>
      <li>Item 3-2</li>
      <li>Item 3-3</li>
    </ul>
  </li>
  <li>
    Item 4
    <ul>
      <li>Item 4-1</li>
      <li>Item 4-2</li>
      <li>Item 4-3</li>
    </ul>
  </li>
  <li>
    Item 5
    <ul>
      <li>Item 5-1</li>
      <li>Item 5-2</li>
      <li>Item 5-3</li>
    </ul>
  </li>
</ul>

另外我也希望你查看这篇文章:Twitter Bootstrap中的树木.

我认为,CSS为下面做了一些事情.(类似的东西margin-bottom)我建议你在上面做(例如,使用margin-top而不是margin-bottom),这将解决问题:

li::before {
    content: '';
    position: absolute;
    height: 1px;
    background: #666;
    top: 11px;
    width: 30px;
    left: -17px;
}

li:first-child::before {
    display: none;
    content: '';
    position: absolute;
    height: 1px;
    background: #666;
    top: 11px;
    width: 30px;
    left: -17px;
}

ul.child::before {
    display: none; /* Get rid of this */
    content: '';
    position: absolute;
    width: 1px;
    background: #666;
    top: -9px;
    bottom: 10px;
    left: -14px;
}

或者快速修复:

li:last-child::before {
    display: none;
}

Answer 2

如果您的列表位于简单的单色背景上，您可以使用以下内容覆盖它:after：

ul.child > li:last-child li:after {
  content: '';
  position: absolute;
  width: 1px;
  background: #F3F5F6; /* background of the site */
  top: -9px;
  bottom: 4px;
  left: -27px;
}

https://jsfiddle.net/8s48m07a/7/