如何动态调整组织结构图定位

Question

我有一个组织结构图，您可以看到一些示例代码here。不过我对此有一些挑战。

第一个挑战是，当可用宽度小于行的宽度时，它会换行，然后这些行全部搞砸了。有没有办法强制它保持在同一条线上，只需添加一个水平滚动条？不是理想的解决方案，但至少会保持布局。

第二个挑战是将相同级别的行链接到父级。所有这些＆＃34;测试名称＆＃34;将链接到适用的＆＃34;测试子公司＆＃34;使用边线。我不知道从哪里开始。

第三个挑战是让每个级别都集中。我在考虑：

.orgChart ul li {
   float: left; //remove
   display: inline-block; //add
} 

但这会导致其他问题。

任何一方的任何帮助都会令人赞赏。谢谢。

Answer 1

为了保持同一条线，我需要使用white-space：nowrap并将li转换为inline-block。关于这一点需要注意的一点是，李先生之前和之后的任何空白都显示出了一条线，所以我不得不将其删除。我还必须添加vertical-align：top以确保线条保持连接，如果li的高度不同。这也解决了中心问题。仍然不确定多行项目，但这至少可以作为现在的解决方案。

.orgChart ul {
    ...
    white-space: nowrap;
}
.orgChart ul li {
    ...
    vertical-align: top;
    display: inline-block;
}

您可以看到修订后的小提琴here。