用CSS设计树结构

Question

如何使用HTML / CSS设计以下类型的结构？  

如果您有

，请提供任何参考站点链接

编辑： 对不起，如果你没有得到我的问题，它只是我不太了解设计 我想要构建的是Tree结构，但我不知道我应该使用什么HTML标签以及我将如何绘制这些行，所以只需要你的帮助。如果你知道如何实现这一点，请分享。

谢谢。

Answer 1

https://github.com/wesnolte/jOrgChart

这是一个漂亮的jQuery插件，可以完全满足您的需求。

代码示例：

我们假设这是您的unordered list。

<ul id="org">
<li>
    Food
    <ul>
        <li id="beer">Beer</li>
        <li>Vegetables
            <ul>
                <li>Pumpkin</li>
            </ul>
        </li>
        <li>Bread</li>
        <li class="collapsed">Chocolate
            <ul>
                <li>Topdeck</li>
                <li>Reese's Cups</li>
            </ul>
        </li>
    </ul>
</li>

像这样添加假div

<div id="chart" class="orgChart"></div>

现在，你可以简单地使用

jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : true
        });
    });

将unordered list呈现为目录树/组织结构图结构。