7
Tôi đã tìm thấy biểu đồ này để hiển thị cây gia đình. Tất cả mọi thứ là tuyệt vời mong đợi cho vợ chồng. Mối liên hệ giữa vợ chồng không thẳng. Tôi muốn đường nối giữa vợ chồng là đường thẳng. thức ăn sống có thể được nhìn thấy trong liên kết dưới đây: live demo jsFiddleBiểu đồ tổ chức
/*Now the CSS*/
* {
margin: 0;
padding: 0;
}
.yellow {
background: #FFEC94;
}
.orange {
background: #FFF7EF;
}
.green {
background: #B0E57C;
}
.royal-blue {
background: #56BAEC;
}
.brown {
background: #FFAEAE;
}
.green-one {
background: #D6E3B5;
}
.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;
}
/*We will use ::before and ::after to draw the connectors*/
.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;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.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: 1px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.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: 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;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover+ul li a {
background: #c8e4f8;
color: #000;
border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.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;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/<div class="tree" style="width:2860px">
<ul>
<li>
<a href="#" class="first yellow">Husband Name</a>
<ul>
<li><a href='#'>Child One</a>
</li>
<li>
<a href='#'>Child Two</a>
<ul>
<li><a href='#'>Grand Child One</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="first yellow">Spouse Name</a>
</li>
</ul>
</div>Thank-you
tôi không thể cung cấp cho bạn một giải pháp hoàn chỉnh, những gì bạn cần làm là để tính toán một trái đúng đắn về giá trị phù hợp với từng li item. Giá trị này phải thay đổi mỗi khi bạn hiển thị hoặc ẩn một ul – silviagreen