CSS 自底向上嵌套 ul 流程图

Question

我正在尝试找出如何定位使用 ul 列表构建的流程图，它像树一样生长，来自 bottom-up。

这是家谱家谱。我已经使用这个很棒的代码 here 从上到下完成了它，但我想要底部的第一个元素，在它上面是 parents ，在它上面是 grandparents 等等。 .

代码如下：

HTML

<div class="tree">
    <ul>
        <li>
            <div class="dados_membro">Me</div>
            <ul>
                <li>
                    <div class="dados_membro">Father</div>
                    <ul>
                        <li>
                            <div class="dados_membro">Grandfather</div>
                        </li>
                        <li>
                            <div class="dados_membro">Grandmother</div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="dados_membro">Mother</div>
                    <ul>
                        <li>
                            <div class="dados_membro">Grandfather</div>
                        </li>
                        <li>
                            <div class="dados_membro">Grandmother</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.tree ul {
    padding-top: 20px;
    position: relative;
}

.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 39px 5px 0 5px;
}

.dados_membro {
    border: 1px solid;
    border-radius: 20px;
    width: 300px;
    margin: auto;
    text-align:left;
    padding:10px
}

我正在测试此 fiddle 中的一些规则，可以将第一个节点 "Me" 放在底部，其他节点放在 CSS 下方，但是所有节点在同一级别（parents、grandparents 等等..）起球了。

.tree ul {
    position: absolute;
    bottom:0;
}

.tree ul li ul{
    position:relative;
}

.tree li {
    float: right;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    margin-top:-120px
}
.dados_membro {
    border: 1px solid;
    border-radius: 5px;
    width: 100px;
    margin: auto;
    text-align:left;
    padding:10px
}

我不知道这棵树会长多大，也不知道所有节点是否都有元素。不能为此使用 javascript。有什么想法吗？

Answer 1

您可以使用 flexbox property flex-direction: column-reverse, if that is an option for your project (see compatibility table) 更改元素的顺序。

Answer 2

为了恢复列表的顺序，我给了主容器 position: absolute 和 bottom:0、<ul>s a position:relative 和所有 <li>s position:absolute 和 bottom:50px，除了我想在容器底部的第一层。

这样每个 <li> 都位于其具有相对位置的 parent <ul> 上方 50px。

实现树形样式的最后一个调整是为女性和男性 parent 添加 class，以便将每个 child 的左侧和右侧定位] 节点。因为我是动态生成这棵树，所以我可以计算这棵树有多少层，并计算 father/mother 个节点之间的距离。如果我无法动态控制 html，我将需要使用 javascript 来计算节点并动态应用 css 规则（也许我将来会做 ti，只是动画树生成）。

新密码是here

HTML

<div class="tree">
    <ul>
        <li>
            <div class="dados_membro">Me</div>
            <ul>
                <li class="f1">
                    <div class="dados_membro">Father</div>
                    <ul>
                        <li class="f2">
                            <div class="dados_membro">Grandfather f</div>
                        </li>
                        <li class="m2">
                            <div class="dados_membro">Grandmotherf </div>
                        </li>
                    </ul>
                </li>
                <li class="m1">
                    <div class="dados_membro">Mother</div>
                    <ul>
                        <li class="f2">
                            <div class="dados_membro">Grandfather m</div>
                        </li>
                        <li  class="m2">
                            <div class="dados_membro">Grandmother m</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.tree {
    position:absolute;
    bottom: 0;
    left:300px
}

.tree ul {
    position: relative;
    list-style:none;
}

.tree ul li ul li{
    position: absolute;
    bottom: 50px;
}

.f1{
   left:-150px;
}

.m1 {
    left:150px;
}

.f2{
   left:-80px;
}

.m2 {
    left:80px;
}

.dados_membro {
    border: 1px solid;
    border-radius: 5px;
    width: 100px;
    margin: auto;
    text-align:left;
    padding:10px
}

CSS 自底向上嵌套 ul 流程图

CSS nested ul flowchart from bottom up

html

css

binary-tree

html-lists