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

为您尝试了一个最小的完整模型。看看这个：

＆＃13;

* {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;
}

＆＃13;

<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>

＆＃13;

另外，我也希望您查看此帖： Trees in 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/

Answer 3

使用像这样：

<ul>
<li>Yahho</li>
<li>stein
<ul>
<li>1
  <ul>
  <li>11
    <ul>
    <li>111</li>
    <li>112</li>
    <li>113</li>
    </ul></li>
  <li>12</li>
  <li>13</li>
  </ul></li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>sand</li>
<li>leire</li>
<li>messar</li>
<li>jord</li>
<li>fly</li>
</ul>

树状结构为嵌套的ul li

3 个答案: