我在网站上工作，我的树连接器有问题 所以这是我的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中创建一个类，让css样式决定连接器左边或右边的位置：$
或者我只是在做梦：D
答案 0 :(得分：0)
我只是使用了一些边框来连接它们 -
https://jsfiddle.net/jadeallencook/xqtt02jc/
select
name
from
(select distinct
name
from table1
union all
select distinct
name
from table2
union all
select distinct
name
from table3
union all
select distinct
name
from table4) temp
group by name
having count(*) > 1;