javascript - 使用 CSS 设计树形结构

Question

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

如果您有，请提供任何参考网站链接

编辑：抱歉，如果您没有收到我的问题，只是我对设计知之甚少，所以我要构建的是树结构，但我不知道应该使用哪些 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为目录树/组织结构图结构。