पेड़ को क्षैतिज

Question

के रूप में देखने में असमर्थ मैं क्षैतिज पेड़ बनाना चाहता हूं।

मुझे एक लिंक http://codepen.io/Pestov/pen/BLpgm मिला लेकिन यह क्षैतिज नहीं है। मैंने css को बदलने की कोशिश की लेकिन अपेक्षित दृश्य प्राप्त करने में असमर्थ। क्या कोई मुझे बता सकता है कि पेड़ को क्षैतिज के रूप में देखने के लिए मैं इसे कैसे कर सकता हूं। बाएं से रूट शुरू करें।

मुझे नीचे छवि के लिए सीएसएस चाहिए ... और यह गतिशील होना चाहिए। जैसे कि नोड्स हटा दिए जाते हैं तो इसे किनारों को समायोजित करना चाहिए।

Answer 1

एक तरीका यह हो सकता है सिर्फ .tree बारी बारी से और फिर आवश्यकतानुसार पेड़ की स्थिति को समायोजित top और left गुण होगा।

संपादित:

अपने सीएसएस करने के लिए इस जोड़ें:

.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 करने के लिए इन करें:

:

.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 तत्वों में से एक के लिए एक id जोड़े 012,356 , अंत में

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

ऊंचाई यहां नहीं बदल:

फिर इस सीएसएस जोड़ने

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

और यहाँ ऊंचाई:

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

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

Answer 2

जे एस फिडल: https://jsfiddle.net/dsupreme/24vs99d3/

निम्नलिखित सीएसएस जोड़ें:

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

जोड़े इस उपयोगिता जे एस

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

नोट:

इस परिदृश्य के लिए काम करता है, जहां एक ही पर तत्वों नाम का एक ही मूल्य नहीं है क्योंकि हम प्रत्येक नोड और टी की चौड़ाई को मापते हैं मुर्गी प्रत्येक <a> को मार्जिन अलग से जोड़ें

मार्जिन: शीर्ष सही नीचे वाम हम बाएं और दाएं संरेखित क्योंकि ऊपर और नीचे जब 90 डिग्री तक घुमाया के लिए ऊपर और नीचे मार्जिन दे रहे हैं छोड़ दिया और सही