CSS ve HTML ile Dikey Ağaç

Question

HTML ve CSS ile dikey bir ağaç yapısı çizmeye çalışıyorum. Bir dereceye kadar yaptım. Benim durumumda

<!-- 
We will create a family tree using just CSS(3) 
The markup will be simple nested lists 
--> 
<div class="tree"> 
    <ul> 
     <li> 
      <a href="#">Parent</a> 
      <ul> 
       <li><a href="#">Child</a> 
        <ul> 
         <li><a href="#">Grand Child</a></li> 
        </ul> 
       </li> 
       <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> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Fiddle , bir düğüm daha fazla değildir maksimum 2 çocuga, sahip olabilir. İlk çocuk düğümü için çalışıyorum. İkinci çocuk durumunda, dikey çizgiyi% 100'e (ana düğüme kadar) alamıyorum.

Bazı ince ayar yapmayı denedim ama hiçbiri işe yaramadı. CSS'ime ne değiştirebilirim, böylece tüm düğümler bağlanır ve ağaç gibi görünür.

CSS ile yapmak mümkün müdür? veya bazı javascript ekleyerek mümkün mü? Eğer olasılıklar sınırlı sayıda olması ve çok dinamik bir şey arıyor Değilse

Answer 1

, yapabileceğin tek şey :after pseudo element için farklı top ve height ile sınıfları ekleyebilir ve her birinin ne bağlı size li öğelerini html dersleri uygulamak olduğunu gerekir. Örneğin Bunun gibi bir şey:

.tree li::after{ 
    content: ''; 
    position: absolute; top: 0; 

    width: 3%; height: 50px; 
    right: auto; left: -2.5%; 

    border-bottom: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    border-radius: 0 0 0 5px; 
    -webkit-border-radius: 0 0 0 5px; 
    -moz-border-radius: 0 0 0 5px; 
} 
.tree li.two-step::after{ 
    top: -100px; 
    height: 150px; 
} 

.tree li.three-step::after{ 
    top: -180px; 
    height: 230px; 
} 

https://jsfiddle.net/g2ue3wL5/1/

DÜZENLEME:

:after pseudo-elements Handling dinamik o kadar kolay değildir (en azından benim için ...). Onları doğrudan işlemek için gerçekten bir yol yoktur, gerçek öğelerini gözden geçirmelisiniz ve o zaman bile CSS ile çalışmanız gerekir. Dolayısıyla, :after ile dinamik bir çözüm, bence en iyi yaklaşım olamazdı.

Ancak bunları span ile değiştirebilir ve jQuery ile çalışabilirsiniz. Bu size nispeten küçük ve kolay bir çözüm sunar. > Açıklıklı sonra:

<li><a href="#">Child</a> <span></span>  
<li><a href="#">Grand Child</a><span></span> 

Ardından CSS'nizde değiştirin: Birincisi, her birine bir eleman Bir yayılma eklemek

.tree li > span { 
    content:''; 
    position: absolute; 
    top: 0; 
    width: 3%; 
    height: 50px; 
    right: auto; 
    left: -2.5%; 
    border-bottom: 1px solid #ccc; 
    border-left: 1px solid #ccc; 
    border-radius: 0 0 0 5px; 
    -webkit-border-radius: 0 0 0 5px; 
    -moz-border-radius: 0 0 0 5px; 
} 

Ve bu span her geçmesi ve bazı hesaplamalar ayarlamak için yapmak height ve topparent bağlı olarak:

$('.tree li > span').each(function() { 
    var thisNewTop = $(this).closest('ul').offset().top - $(this).offset().top; 
    var thisNewHeight = $(this).offset().top - $(this).closest('ul').offset().top + 50; 

    $(this).css({ 
     top: thisNewTop, 
     height: thisNewHeight 
    }); 
}); 

https://jsfiddle.net/g2ue3wL5/3/

Düz javascript'daki eşdeğer çözüm çok daha uzun olurdu, bence bu, jQuery'un çok zaman kazandırabileceği bir durum.