我有一个组织结构图，您可以看到一些示例代码 here .然而，我对此有一些挑战。
第一个挑战是，当可用宽度小于行的宽度时，它会换行，然后所有的行都被弄乱了。有没有办法强制它保持在同一条线上，只添加一个水平滚动条？这不是理想的解决方案，但至少可以保持布局的完整性。
第二个挑战是将同一级别的行链接到父级。所有这些“测试名称”都将使用副线链接到适用的“测试子公司”。我不确定从哪里开始。
第三个挑战是让每个级别都居中。我在想:
.orgChart ul li {
float: left; //remove
display: inline-block; //add
}
但这会导致其他问题。
任何对其中任何一个的帮助都将不胜感激。谢谢。
最佳答案
为了保持在同一行上，我需要使用 white-space: nowrap 并将 li 转换为 inline-block。对此要注意的一件事是，li 前后的任何空白都显示了该行的中断，因此我不得不删除它们。我还必须添加 vertical-align: top 以确保在 li 的高度不同时线条保持连接。这也解决了居中问题。仍然不确定多行元素，但这至少可以作为目前的解决方案。
.orgChart ul {
...
white-space: nowrap;
}
.orgChart ul li {
...
vertical-align: top;
display: inline-block;
}
可以看到修改后的fiddle here .
关于jquery - 如何动态调整组织结构图定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24619994/