html – 嵌套ul li的树状结构[复制]

概述参见英文答案 > Trees in Twitter Bootstrap [closed]                                    6个 我从订单列表下面做了一个树状的结构.输出看起来像这样 问题是图像中的红色圆圈.所以如果我没有任何进一步的水平但是显示出来,我不想显示那条线.我无法解决这个问题. 显示线条的css如下 li::before { content: 参见英文答案 > Trees in Twitter Bootstrap [closed]                                    6个
我从订单列表下面做了一个树状的结构.输出看起来像这样

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

显示线条的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 ><li ID="" >    <i ></i>    <div >        <input type="checkBox" name="masstypeID"  ID="t_8587509197182534205xy9w" value="8587509197182534205xy9w">        <label for="t_8587509197182534205xy9w"></label>    </div>    <span >Sand</span>    <ul >        <li ID="8587509198220874655a1s8" >            <i ></i>            <div >                <input type="checkBox" name="masstypeID"  ID="t_8587509198220874655a1s8" value="8587509198220874655a1s8">                <label for="t_8587509198220874655a1s8"></label>            </div>            <span >Fyllgrus</span>            <ul >                <li ID="8587496127195835630dojv" >                    <i ></i>                    <div >                        <input type="checkBox" name="masstypeID"  ID="t_8587496127195835630dojv" value="8587496127195835630dojv">                        <label for="t_8587496127195835630dojv"></label>                    </div>                    <span >sub sub sub sub</span>                    <ul >                        <li ID="8587496127026996853ltmu">                            <i ></i>                            <div >                                <input type="checkBox" name="masstypeID"  ID="t_8587496127026996853ltmu" value="8587496127026996853ltmu">                                <label for="t_8587496127026996853ltmu"></label>                            </div>                            <span >sub sub</span>                        </li>                    </ul>                </li>                <li ID="8587496924061602638qkdo" >                    <i ></i>                    <div >                        <input type="checkBox" name="masstypeID"  ID="t_8587496924061602638qkdo" value="8587496924061602638qkdo">                        <label for="t_8587496924061602638qkdo"></label>                    </div>                    <span >sub sub</span>                    <ul >                        <li ID="8587496231036093626v5ql">                            <i ></i>                            <div >                                <input type="checkBox" name="masstypeID"  ID="t_8587496231036093626v5ql" value="8587496231036093626v5ql">                                <label for="t_8587496231036093626v5ql"></label>                            </div>                            <span >sub sub sub</span>                        </li>                    </ul>                </li>            </ul>        </li>        <li ID="8587509198127281697em9f">            <i ></i>            <div >                <input type="checkBox" name="masstypeID"  ID="t_8587509198127281697em9f" value="8587509198127281697em9f">                <label for="t_8587509198127281697em9f"></label>            </div>            <span >Siltholdig</span>        </li>    </ul></li>

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

解决方法 如果您的列表位于简单的单色背景上,则可以使用以下内容覆盖：

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/

总结

以上是内存溢出为你收集整理的html – 嵌套ul li的树状结构[复制]全部内容，希望文章能够帮你解决html – 嵌套ul li的树状结构[复制]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。