嵌套ul li的树状结构[重复]答案

【问题标题】：Tree like structure for nested ul li's [duplicate]嵌套ul li的树状结构[重复]
【发布时间】：2016-04-09 05:36:01
【问题描述】：

我从订单列表中制作了一个树状结构。输出如下所示

问题是图像中的红色圆圈。因此，如果我没有任何其他级别但显示出来，我不想显示该行。我无法解决这个问题。

显示线条的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/

【问题讨论】：

你能在 Fiddle 或 Snippet 中重新创建它吗？
@JamieBarker 添加了小提琴。
这可能会有所帮助：Dashed-styled list linking divs
你好 Mohsin，你能分享显示 + 和 - 类文件夹结构的代码吗？

标签： html css twitter-bootstrap

【解决方案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>

我还希望您也查看此帖子：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;
}

【讨论】：

快速修复不起作用，因为它将隐藏所有最后一个孩子。我会尝试另一个。
@ChaudhryMohsinAli Lemme 试试你的小提琴。请稍等。
@ChaudhryMohsinAli jsbin.com/sixucutino
@ChaudhryMohsinAli 请看更新版本。
只有一个孩子而不用 ul li:not(:first-child):last-child 替换 ul li:last-child::before {display: none;} 时不起作用::before {display: none;} ul li:first-child:last-child::before {content: " ";位置：绝对；宽度：1px；背景颜色：#000；顶部：5px；底部：7px；左：-10px;}

【解决方案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/

【讨论】：

gist.github.com/dylancwood/7368914

【解决方案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>

【讨论】：