Impossibile visualizzare l'albero come orizzontale

Question

Voglio creare l'albero orizzontalmente.

Ho un collegamento http://codepen.io/Pestov/pen/BLpgm ma non è orizzontale. Ho provato a cambiare css ma non riesco a ottenere la vista prevista. qualcuno potrebbe per favore dirmi come posso farlo per visualizzare l'albero come orizzontale. radice inizia da sinistra.

Voglio css per l'immagine qui sotto..e dovrebbe essere dinamico. come se i nodi fossero cancellati, allora dovrebbe regolare i bordi.

Answer 1

Un modo sarebbe solo ruotare .tree e quindi regolare top e left proprietà per posizionare l'albero come necessario.

Modificato:

Aggiungi questo alla tua CSS:

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

aggiungerli al .tree li a:

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

Aggiungi un id ad uno degli ul elementi:

012.

Quindi aggiungere questo css:

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

Infine, modificare l'altezza qui:

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

e l'altezza qui:

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

AGGIORNATO CODEPEN:http://codepen.io/anon/pen/yOGNmE

Answer 2

JS Fiddle: https://jsfiddle.net/dsupreme/24vs99d3/

Aggiungere il seguente CSS:

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

Aggiungere questo js utility

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

Nota:

Questo funziona per lo scenario in cui gli elementi sulla stessa il nome non ha lo stesso valore perché misuriamo la larghezza di ogni nodo e t gallina aggiungere margine per ogni <a> separatamente

Margine: In alto a destra in basso a sinistra Stiamo dando superiore e margine inferiore per l'allineamento sinistro e destro a causa superiore e inferiore quando viene ruotato di 90 gradi diventano proprietà di sinistra e di destra