Css（树连接器）

Question

我在一个网络站点工作，树连接器有问题所以这是我的 css :

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor:pointer
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
    -webkit-transform-origin: 95% 40%;
    -moz-transform-origin: 95% 40%;
    -o-transform-origin: 95% 40%;
    -ms-transform-origin: 95% 40%;
    transform-origin: 95% 40%;  
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: rgb(14,14,14);
    background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

.ch-info h4 {
    color: #fff;
    position: relative;
    font-size: 12px;
    alignment-adjust:central;
    padding: 30px 0 0 0;
    height: 55px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 10px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: #333;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-weight: 10;
    font-size: 9px;
    padding-top: 5px;
    margin: 7px auto 0;
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;

    -webkit-transition: 
        -webkit-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -moz-transition: 
        -moz-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -o-transition: 
        -o-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    -ms-transition: 
        -ms-transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transition: 
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;

    -webkit-transform: translateX(60px) rotate(90deg);
    -moz-transform: translateX(60px) rotate(90deg);
    -o-transform: translateX(60px) rotate(90deg);
    -ms-transform: translateX(60px) rotate(90deg);
    transform: translateX(60px) rotate(90deg);

    -webkit-backface-visibility: hidden;
}

.ch-info p a:hover {
    background: rgba(255,255,255,0.5);
}
.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-140deg);
    -moz-transform: rotate(-140deg);
    -o-transform: rotate(-140deg);
    -ms-transform: rotate(-140deg);
    transform: rotate(-140deg);
}
.ch-item:hover .ch-info p a{
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -moz-transform: translateX(0px) rotate(0deg);
    -o-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
}
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-grid li {
    width: 110px;
    height: 110px;
    display: inline-block;
    margin: 20px;
}

.ch-name li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.ch-name li a:hover+ul li::after, 
.ch-name li a:hover+ul li::before, 
.ch-name li a:hover+ul::before, 
.ch-name li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

你是 html :

<!-- /////////////////////////////////////////// 
                        Parent Users
        ////////////////////////////////////////////-->

    <ul class="ch-grid">
        <li>
            <div class="ch-item">
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->
        </div>
    <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
        </li>
                <li>
            <div class="ch-item">
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->
        </div>
    <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
        </li>
    </ul>


    <!-- /////////////////////////////////////////// 
                        Child Users
        ////////////////////////////////////////////-->

    <ul class="ch-grid NetworkUserItem" id="userItem"  >
        <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
    <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
    <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
    <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
    </ul>

        <!-- /////////////////////////////////////////// 
                        Grand Child Users
        ////////////////////////////////////////////-->

    <ul class="ch-grid NetworkUserItem" id="userItem"  >
        <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li></ul>

        <!-- /////////////////////////////////////////// 
                        Great Grand Child Users
        ////////////////////////////////////////////-->

    <ul class="ch-grid NetworkUserItem" id="userItem"  >
        <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
            <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
            <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
            <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>
            <li>
            <div class="ch-item">   
                <div class="ch-info">
                    <h4>Kareem Hussein</h4>
                    <p>Profile</p><!-- Profile Link -->
                </div><!-- User Info end -->

        <div class="clearfix"></div>
                <div class="ch-thumb"><img src="photolink" /></div><!-- User Photo -->

                        </div>

        <div class="clearfix"></div>

        <div class="clearfix"></div>
    <button type="button" class="btn btn-wide btn-red" disabled="disabled">Id</button><br />
    <span class="Code NetworkCode btn btn-wide btn-o btn-primary" onclick="GetCodePlaceForOwner('Id')">Id</span>
    </li>

    </ul>

现在我想将此示例 (demo) 中所示的连接器连接到此代码，但我的问题是当我尝试放置我无法制作的 Php 代码时它可以像这样创建许多 ul 和 li :

<a href="#">Child</a>
                    <ul>
                        <li><a href="#">Grand Child</a></li>
                        <li>
                            <a href="#">Grand Child</a>
                            <ul>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Grand Child</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

所以该怎么办...还有一种方法可以在 div 中制作 class 并让 css 样式决定连接器向左或向右的位置拥有：$

或者我只是在做梦:D

Answer 1

我只是用了一些边框来连接它们 -

https://jsfiddle.net/jadeallencook/xqtt02jc/

.connector {
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    width: 25%;
    height: 25px;
}

Css（树连接器）

Css ( tree connectors )

html

css

networking

treeview