如何使用CSS、HTML和少量Javascript显示二进制搜索树？

我想使用CSS和HTML在屏幕上“绘制”树，而不是以任何方式或数据结构来表示它…

一种非常简单的用HTML和CSS创建树状结构的方法是嵌套

s
每个

div

表示一个节点，可以在其中包含多个节点：

<div> //root
    <div> //child 1
        <div> //child 1.1
            <div></div> //child 1.1.1
            <div></div> //child 1.1.2
            <div></div> //child 1.1.3
        </div>
        <div></div> //child 1.2
    </div>
    <div></div> //child 2
</div>

//根目录
//儿童1
//儿童1.1
//儿童1.1.1
//儿童1.1.2
//儿童1.1.3
//儿童1.2
//儿童2

然后，您可以向所有div添加一个

边距顶部

，以便它们显示在其父div下

JSFIDLE：

我已经为每个div添加了百分比宽度。如果您知道一个节点有多少子节点，就可以计算宽度。或者你可以使用固定的宽度

---

是的，这不是一棵漂亮的树，但它再简单不过了。

用css取消二叉树和单水平树的限制

演示：

Html:

主
测试Btn


Sub-1


Sub-2


Sub-2-1


Sub-2-2

Css:

树胶{
填充顶部：20px；位置：相对；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李先生{
浮动：左；文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
.tree li:：之前，.tree li:：之后{
内容：''；
位置：绝对；顶部：0；右侧：50%；
边框顶部：1px实心#ccc；
宽度：50%；高度：20px；
}
李树：之后{
右：自动；左：50%；
左边框：1px实心#ccc；
}
.tree li:独生子女：：之后，.tree li:独生子女：：之前{
显示：无；
}
.tree li:唯一的子项{padding top:0；}
.tree li:第一个孩子：：之前，.tree li:最后一个孩子：：之后{
边界：0无；
}
李树：最后一个孩子：：之前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
.树ul：：以前{
内容：''；
位置：绝对；顶部：0；左侧：50%；
左边框：1px实心#ccc；
宽度：0；高度：20px；
}
李树科{
边框：1px实心#ccc；
填充物：5px10px；
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
显示：内联块；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
.tree li div:hover、.tree li div:hover+ul li div{
背景：#c8e4f8；颜色：#000；边框：1px实心#94a0b4；
}
.tree li div:hover+ul li：：之后，
.tree li div:hover+ul li:：before，
.tree li div:hover+ul:：before，
.tree li div:hover+ul:：before{
边框颜色：#94a0b4；
}

<div class="tree">

        <ul>
            <li>
                <div><input type="checkbox"> Main <br/> <button> Test Btn </button></div>
                <ul>
                    <li>
                        <div><input type="checkbox"> Sub-1</div>
                    </li>
                    <li>
                        <div><input type="checkbox"> Sub-2</div>
                        <ul>
                            <li>
                                <div><input type="checkbox"> Sub-2-1</div>
                            </li>
                            <li>
                                <div><input type="checkbox"> Sub-2-2</div>
                            </li>
                        </ul>  
                    </li>
                </ul>

            </li>
        </ul>

    </div>

<style>
.tree ul {
    padding-top: 20px; position: relative;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}

.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

.tree li:only-child{ padding-top: 0;}

.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}
.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}
.tree li div{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.tree li div:hover, .tree li div:hover+ul li div {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.tree li div:hover+ul li::after, 
.tree li div:hover+ul li::before, 
.tree li div:hover+ul::before, 
.tree li div:hover+ul ul::before{
    border-color:  #94a0b4;
}

</style>