<style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            .clear {
                clear: both;
            }
            
            .tree {
                width: 90%;
                margin: auto;
            }
            
            .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 a {
                border: 1px solid #ccc;
                padding: 5px 10px;
                text-decoration: none;
                color: #666;
                font-family: arial, verdana, tahoma;
                font-size: 20px;
                display: inline-block;
                width: 20px;
                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 a:hover,
            .tree li a:hover+ul li a {
                background: #c8e4f8;
                color: #000;
                border: 1px solid #94a0b4;
            }
            
            
            .tree li a:hover+ul li::after,
            .tree li a:hover+ul li::before,
            .tree li a:hover+ul::before,
            .tree li a:hover+ul ul::before {
                border-color: #94a0b4;
            }
        </style>


<div class="tree">
    <ul>
        <li>
            <a href="#">張三</a>
            <ul>
                <li>
                    <a href="#">張四</a>
                    <ul>
                        <li>
                            <a href="#">張五一</a>
                            <ul>
                                <li>
                                    <a href="#">張六一</a>
                                </li>
                                <li>
                                    <a href="#">張六二</a>
                                </li>
                                <li>
                                    <a href="#">張六三</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">張五二</a>
                        </li>
                    </ul>
                </li>

            </ul>
        </li>
    </ul>
</div>

如果想要讓這個樹狀圖根據(jù)數(shù)據(jù)無限拓展怎么辦