html - 尝试制定自定义CSS组织结构图；我的div坐不正确

基本上，我正在尝试建立基本的组织结构图。这个想法是，有7个div保持员工在组织结构图上的级别。从本质上讲，主任将是一名1级雇员，他将位于高层（第1行）。接下来的两个地方，主任的助理和副主任，应保持固定高度，离主任一定距离；但是，由于这两个元素作为ul一起位于div中，因此它们堆叠而不是居中并排放置。

这是指向代码笔的链接，下面是示例代码：http://codepen.io/jacob_johnson/pen/Oymvap

/* HTML */
<div class="content">
    <figure class="org-chart cf">
        <ul class="dcca">
            <li>
                <ul class="level1">
                    <li><a href="#dir"><span>Director</span></a></li>
                </ul>
                <ul class="level2">
                    <li><a href="#ad"><span>Assistant to the Director</span></a></li>
                    <li><a href="#dd"><span>Deputy Director</span></a></li>
                </ul>
            </li>
        </ul>
    </figure>
</div>

/* CSS */
.level2 > li > a {
    width: 200px;
    margin: 0 auto;
    display: inline-block;
}

.level2 {
    position: fixed;
    top: 100px;
}

我要实现的目标是使第二行（主任助理和副主任）彼此内联并居中。我可以实现一个或另一个，但是我不知道如何做到这两个。我看过许多其他主题，但我想不通...

最佳答案

如果我正确了解您的情况，我认为这可以很好地解决。从.level2删除固定的位置和顶部空间，然后添加：

ul.dcca{
  text-align:center;
}
ul.dcca li{
  display:inline-block;
}

关于html - 尝试制定自定义CSS组织结构图；我的div坐不正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32978888/