CSS垂直家族树-第一个孩子的最后一个孩子

Question

I have a tree in css flex and it looks correct:

And here is the code:

 .dot { width: 50px; height:60px; background: #ccc; text-align: center; vertical-align: middle; position: relative; } .dot::before { display: block; content: ''; width: 10px; height:10px; margin-left: calc(50% - 5px); margin-top: -10px; border-left: solid 10px #900; } .dot::after { display: block; position: absolute; content: ''; width: 50px; height:50px; border-radius: 50%; background: #ddd; } .tree { display: flex; flex-direction: column; align-items: center; } .tree>:first-child::before { height: 80px; } .tree>:first-child::after { top: 0; } .kid { display: flex; } .kid>div { border-top: solid 10px #900; padding-top: 10px; } .kid>:first-child, .kid>:last-child { border-top-color: rgba(0,0,0,.2); } .kid>:first-child::before { display: block; content: ''; width: 100%; height:10px; margin-top: -20px; border-top: solid 10px #900; border-left: solid 10px #900; } .kid>:last-child::before { display: block; content: ''; width: calc(50% - 5px); height:10px; margin-top: -20px; border-top: solid 10px #900; border-right: solid 10px #900; margin-left: 0; border-left: 0; } .tree::before { /* for tree is the last kid */ /* margin-left: calc(5px - 50%) !important; */ /* also need fix if tree is first child */ } .kid>:only-child::before { border-top: 0; height: 20px; } 

 <div class="kid"> <div class="dot" title="a"></div> <div class="tree" title="b"> <div class="dot"></div> <div class="kid"> <div class="dot" title="b1"></div> <div class="tree" title="b2"> <div class="dot"></div> <div class="kid"> <div class="dot"></div> <div class="tree"> <div class="dot"></div> <div class="kid"> <div class="dot"></div> </div> </div> <div class="tree"> <div class="dot"></div> <div class="kid"> <div class="dot"></div> <div class="dot"></div> </div> </div> <div class="dot"></div> </div> </div> <div class="dot" title="b3"></div> </div> </div> <div class="dot" title="c"></div> </div> 

When kid's first element is a tree, or the last element is a tree, or it is an only kid as a tree, then it look not right as per following (by delete a or c or b1 or b3 or delete both a and b):

I can fix by remove the following:

.tree {
  align-items: center;
}

But it affect others.

Anyone can help?

[Also there is a gap for the first element inside a tree, but when background is transparent, I do not care much]

Answer 1

And I have modified from codepen.io/simplyhue/pen/pjEYGo as followings:

 * { margin: 0; padding: 0; } .tree { white-space: nowrap; overflow: auto; } .tree ul { padding-top: 10px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { text-align: center; list-style-type: none; position: relative; padding: 10px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /*added for long names*/ float: none; display: inline-block; vertical-align: top; white-space: nowrap; margin: 0 -2px 0 -2px; } /*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: 2px solid #ccc; width: 50%; height: 10px; } .tree li::after { right: auto; left: 50%; border-left: 2px 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;*/ border-radius: 0 !important; left: 0; } /*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: 2px 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; } /*Time to add downward connectors from parents*/ .tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #ccc; width: 0; height: 10px; } .tree li a { border: 2px 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: 2px 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; } .husband { float: left; } .wife { margin-left: 2px; } 

 <div class="tree"> <ul> <li> <a href="#">Father</a>--<a href="#">Mother</a> <ul> <li><a href="#">A</a></li> <li> <a href="#">B</a> <ul> <li><a href="#">B1</a></li> </ul> </li> <li> <a href="#">Child</a> <ul> <li><a href="#">C1</a></li> <li> <a href="#">C2</a> <ul> <li><a href="#">C21</a></li> <li><a href="#">C22</a></li> <li><a href="#">C23</a></li> </ul> </li> <li> <a class="husband" href="#">C3</a>--<a class="wife">Wife</a> <ul> <li><a href="#">Kid</a></li> <li><a href="#">Kid</a></li> </ul> </li> </ul> </li> <li> <a href="#">D</a> <ul> <li><a href="#">Kid</a> <ul> <li><a href="#">Kid</a></li> </ul> </li> </ul> </li> </ul> </div> 

In case you need it similarly