如何使用CSS，HTML和一些Javascript顯示二叉搜索樹？

Question

我想「畫」使用CSS和HTML，並不能代表它以任何方式或數據結構在屏幕上樹...

Answer 1

使用HTML和CSS創建一個樹形結構的非常簡單方式被嵌套<div>小號
每個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> 

然後你可以一個margin-top添加到所有的div，讓他們出現在其父格下。

一個的jsfiddle：http://jsfiddle.net/VxRmc/

我已經添加了百分比寬度每格。如果知道節點有多少個子節點，則可以計算寬度。或者你可以使用固定的寬度...

是的，這不是一棵美麗的樹，但它不能簡單。

Answer 2

UNLIMIT二進制和樹利華用CSS

演示：http://jsfiddle.net/Limitlessisa/5Lhb0ron/

HTML：

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

的CSS：

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