使用 CSS 设计树形结构答案

【问题标题】：Design Tree Structure With CSS使用 CSS 设计树形结构
【发布时间】：2013-05-23 19:43:11
【问题描述】：

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

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

编辑：抱歉，如果您没有收到我的问题，那只是我对设计不太了解我正在尝试构建的是树结构，但我不知道我应该使用哪些 HTML 标签以及如何绘制这些线条，所以只需要你的帮助。如果您知道如何完成此操作，请分享。

谢谢。

【问题讨论】：

我不知道你想要完成什么。您是在尝试用 HTML 来“绘制”实际的树图吗？
节点是指页面？
@harsha 这没什么用，你基本上是在说“你如何编写代码来做到这一点”。（好吧，这在技术上是必须要做的事情，但仍然如此。）
@millimoose 是的，我正在尝试画一棵树。而“节点”只是静态文本。
@millimoose ：我碰巧知道一些与 OP 想要的完全一样的东西，但它是一个 jQuery 插件。因此问题:-)

标签： javascript css html

【解决方案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 呈现为目录树/组织结构图结构。

【讨论】：

@Hardik : 该插件使用unordered list 绘制渲染树结构。
请不要仅提供链接的答案。也许您可以提供代码示例或将您的“答案”作为评论发布？
@JanDvorak : 抱歉只提供链接答案。已添加代码并保留答案。这么多代码是否足够