无法将树视为水平

Question

我想水平创建树.

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

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

Answer 1

一种方法是仅旋转.tree，然后调整top属性left以根据需要定位树。

编辑：

将其添加到您的 CSS 中：

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

将 an 添加id到其中一个ul元素：

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

然后添加这个CSS：

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

最后，更改此处的高度：

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

还有这里的高度：

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

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