Ağaç yatay olarak görüntülenemiyor

Question

Ağaçları yatay olarak oluşturmak istiyorum.

Bir bağlantım var http://codepen.io/Pestov/pen/BLpgm ancak yatay değil. css'u değiştirmeyi denedim ancak beklenen görünümü alamadım. ağacını yatay olarak görmek için nasıl yapabileceğimi söyleyen biri olabilir. kök başlangıçtan sola.

Aşağıdaki resim için css istiyorum ... ve dinamik olmalı. düğümler silinmiş gibi o zaman kenarları ayarlamalıdır. Sadece .tree döndürmek ve daha sonra gerektiği gibi ağaç konumlandırmak için top ve left özelliklerini ayarlamak için

Answer 1

bir yolu olurdu.

REDAKTE:

sizin css Bu ekleyin:

:

.tree li a{ 
    margin: 45px 0; // To accommodate space taken by each node 
    transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    z-index: 10; 
    background: white; 
} 

ul elemanların birine bir id ekleyin:

.tree { 
    position: absolute; 
    top: 50px; 
    left: -50px; 
    transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
} 

.tree li a bunları ekleyinSon olarak

#parent_root::before { 
    height: 80px; 
} 

burada yüksekliğini değiştirmek:

O zaman bu css eklemek

.tree ul ul::before{ 
    height: 100px; 
} 

Ve burada yükseklik:

.tree li::before, .tree li::after{ 
    height: 60px; 
}} 

GÜNCELLEME CODEPEN:http://codepen.io/anon/pen/yOGNmE

Answer 2

JS Fiddle: bu programı

$(document).ready(function() { 
    $.each($("a"), function() { 
     var currWidth = $(this).width(); 
     $(this).css("margin", (currWidth*0.5) + "px 0 " + (currWidth*0.5) + "px 0"); 
    }); 
}); 

Not js

.tree { 
    position: absolute; 
    top: 50px; \\ Increase if elements are being cut from the top 
    left: -50px; \\ Decrease if tree is shifted to much to the right 
    transform: rotate(-90deg); \\ To rotate the whole tree anti clockwise 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
} 

.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; 
    transform: rotate(90deg); \\ To rotate all the nodes clockwise 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 

    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; 
} 

ekleyin:: https://jsfiddle.net/dsupreme/24vs99d3/

aşağıdaki css ekle

Bu senaryo için çalıştığı yere aynı üzerindeki elemanlar ad her değerin ve t'nin genişliğini ölçtüğümüz için aynı değere sahip değil tavuk her <a> için marjı eklemek ayrı

Marjı: Sağ Üst Sol Biz 90 derece döndürüldüğünde üst ve alt çünkü sol ve sağ hizalanması için üst ve alt kenardan veriyoruz mi sol ve sağ