组织结构图

Question

I have found this chart to display family tree. Everything is great expect for husband and wife. The connector between husband and wife is not straight. I want the connector line between husband and wife to be straight line. live feed can be seen in below link: live demo jsFiddle

 /*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

Answer 1

I have a possible solution, unfortunately it is not always general, but it is better than nothing I think.

Here is the soliution:

jsfiddle

Here you can see the solution in full screen

$(document).ready(function() {

  $('.c1').hide();
  $("a").click(function() {

    $(this).parent().children("ul").toggle(); //make ul visible

    //foreach visible ul
    $($('ul').filter(':visible')).each(function() {
      var ul = $(this); 
      var ulL = (ul.outerWidth() / 2);

      var lenght = 0;
  //calculate the left rule accordingly to the length of the li
      if(ul.children("li").length > 2){
         var middle = Math.ceil(ul.children("li").length / 2);

         for (var i = 1; i < middle; i++) {
          lenght = lenght + ul.children("li:nth-child(" + i + ")").outerWidth();
          }

        if ((ul.children("li").length)%2 == 0){
             lenght = lenght + (ul.children("li:nth-child(" + middle + ")").outerWidth());

       }else{
             lenght = lenght + (ul.children("li:nth-child(" + middle + ")").outerWidth() / 2);


        }

         ul.find("li").css("left", (ulL - lenght));

  }
  else if(ul.children("li").length === 2){ // base case, only two li
    var ulL = (ul.outerWidth() / 4);
    var half = ul.children("li:first-child").outerWidth() / 2;

    ul.find("li").css("left", (ulL - half));

  } else if(ul.children("li").length === 1){ // base case, only 1 li
    ul.find("li").css("left", 0);
  }

});


});

});

Unfortunately not always this kind of calculation make the chart well formed, that's why I added a class:

.no-left > li{
   left: 0 !important;
}

In this example I used this in the

  <a href="#" class="yellow">Director <br />Oprn</a>
   <ul class="c1 no-left"> .... </ul>

Answer 2

I write another answer because maybe the first one can be useful to others. Here is a solution for the husband-wife connection problem

 $(document) .ready(function() { $('.c1').hide(); $("a").click(function(){ $(this).parent().children("ul").toggle(); }); }); 

 /*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: 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: 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; } .tree .spouse::before, .tree .spouse::after, .tree .husband::before, .tree .husband::after{ top: 30px; height: 0; z-index: -1; } tree .husband::before, .tree .husband::after{ } .tree .spouse::before, .tree .spouse::after{ } /*Thats all. I hope you enjoyed it. Thanks :)*/ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="tree" style="width:2860px"> <ul> <li class="husband"> <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 class="spouse"> <a href="#" class=" first yellow">Spouse Name</a> </li> </ul> </div>