Question

谢谢你的兴趣，首先我相信形象值得千言万语，所以你走了 This is kind of what I am trying to achieve

不幸的是，我现在没有鼠标，所以它是使用IBM TrackPoint绘制的，但主要的想法应该是清楚的。我把它称为水平树，因为通常树视图是垂直的，你只能在一行上看到一个目录，而目录名的左侧只是垂直线，显示了这个目录的嵌套程度。我试图将“目录”列在彼此旁边。

将其视为具有IF和ENDIF的算法图，它们将始终具有两个输出或输入。

现在，我正在尝试使用基本的HTML元素和CSS来构建它，我一开始认为它将是小菜一碟，但事实并非如此，我整个下午都没有运气。它将由JS动态生成，所以我试图避免使用表。可以有任意数量的IF，ENDIF的数量完全相同。将有许多其他基本单元格。整个结构从一个单元格开始，以一个单元格结束

这是html应该生成类似的图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFs and ENDIFs</title>
<style>
ul, li, div{
    margin: 0px;
    padding: 0px;
    border: 0px;
    }
ul.left{
    border: 1px solid red;
    margin: 2px;
    padding: 2px;
    list-style-type:none;
    width: 150px;
    float:left;
    }
ul.right{
    border: 1px solid green;
    margin: 2px;
    padding: 2px;
    list-style-type:none;
    width: 150px;
    float:left;
    }

}
li.parent{
    border: 1px solid blue;
    background-color:#CC9;
    margin: 2px;
    padding: 2px;
    min-width: 350px;
    display:block;
    overflow-style:marquee-block;
    }
</style>
</head>
<body>
<div id="root">
    <ul>
        <li class="parent">
            <div class="label">1</div>
            <ul class="left">
                <li>    
                    <div class="label">1.L1</div>
                </li>
                <li>
                    <div class="label">1.L2</div>
                </li>
                <li class="parent">
                    <div class="label">1.L3</div>
                    <ul class="left">
                        <li>    
                            <div class="label">1.L3.L1</div>
                        </li>
                    </ul>
                    <ul class="right">
                        <li>    
                            <div class="label">1.L3.R1</div>
                        </li>
                        <li>
                            <div class="label">1.L3.R2</div>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="right">
                <li>
                    <div class="label">1.R1</div>
                </li>
                <li>
                    <div class="label">1.R2</div>
                </li>
                <li class="parent">
                    <div class="label">1.R3</div>
                    <ul class="left">
                        <li>    
                            <div class="label">1.R3.L1</div>
                        </li>
                        <li>
                            <div class="label">1.R3.L2</div>
                        </li>
                        <li>
                            <div class="label">1.R3.L3</div>
                        </li>
                        <li>
                            <div class="label">1.R3.L4</div>
                        </li>
                    </ul>
                    <ul class="right">
                        <li>    
                            <div class="label">1.R3.R1</div>
                        </li>
                        <li>
                            <div class="label">1.R3.R2</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <div class="label">2</div>
        </li>
        <li>
            <div class="label">3</div>
        </li>
    </ul>
</div>
</body>
</html>

到目前为止它是什么样的：（（我希望结果没有什么附近，这也许是我尝试解决这个问题的第7次迭代）所以如果有人能指出我正确的方向我会非常感激它。 enter image description here

Answer 1

HTML线性数据结构，但您尝试重新创建的图形不是线性的。尽管有可能，但它并不一定是微不足道的。

你应该避免使用float，因为嵌套的浮点数有点难以控制。 inline-block可能是一个更好的解决方案，但旧版浏览器支持不多。

看看我做的一个例子，也许你可以建立一个：http://jsfiddle.net/uf5uM/

如何使用CSS和HTML创建水平树视图？

1 个答案: