无法将树视为水平

Question

我想水平创建树。

我有一个链接http://codepen.io/Pestov/pen/BLpgm，但它不是水平的。我尝试更改css但无法获得预期的观看次数。任何人都可以请你告诉我如何才能将树视为水平。从左开始。

我想要css下面的图像..它应该是动态的。好像节点被删除然后它应该调整边缘。

Answer 1

一种方法是只需轮播.dropdown-container { float:right; height:60px; } .position-dropdown-controller { position: absolute; right:0; } .dropdown-toggle, .dropdown-menu { width: 100%; min-width: 0; } .dropdown-toggle { text-align: right; } .dropdown-menu { height: 0; text-align: center; display: block !important; visibility: hidden; position: relative; float: none; } .open .dropdown-menu { display: block !important; visibility: visible; height: auto; } <div class="dropdown-container"> <div class="position-dropdown-controller"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> ... </ul> </div> </div> </div> ，然后根据需要调整.tree和top属性以定位树。

<强>编辑：

将此添加到您的css：

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; } 添加到其中一个id元素：

ul

然后添加此css：

<a href="#">Parent</a>
<ul id="parent_root">

最后，在这里改变高度：

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

这里的高度：

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

更新的CODEPEN： http://codepen.io/anon/pen/yOGNmE

Answer 2

JS小提琴：https://jsfiddle.net/dsupreme/24vs99d3/

添加以下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;
}

添加此js实用程序

$(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度时顶部和底部成为左右属性