html - 如何在 HTML/CSS 中显示一棵树？嵌套的左浮动 div 和环绕

Question

在 HTML/CSS 中，我想以以下形式显示数据树: 根节点在左侧。父节点位于子节点的左侧，第一个子节点始终与父节点位于同一行。兄弟节点在下面的行上。

请参阅此示例。这些线在这里只是说明性的，以了解这些关系。

1 - 1.1 - 1.1.1
  \     ` 1.1.2
   `1.2 - 1.2.1
2 - 2.1
   `2.2

我想让子节点与它们的父节点连接，这样，当我例如拖放父节点，所有连接的子节点也移动。这就是我选择嵌套方法的原因。

我的方法:

<div><p> some text </p><div> recursively add the children here </div></div>

我添加的每个节点都是这样

$(document.createElement('div'))
    .appendTo(parent)
    .css('overflow', 'auto')
    .append($(document.createElement('p'))
        .css('float', 'left')
        .html(some text)
    .append($(document.createElement('div'))
        .css('overflow', 'auto'));

我的方法问题: 当树变得比容器大时，它换行到下一行。但是我想要溢出的效果:隐藏。容器上的这个 css 标签对左浮动元素没有影响。

jsFiddle: 有关示例，请参见此 jsFiddle:http://jsfiddle.net/Afasv/8/ 第一个是树在太紧的容器中的样子，第二个是它有足够的空间，第三个是我使用了一个 hack，我将树放在一个比外部容器大的 div 中。

如有任何解决方案，我们将不胜感激!

Answer 1

以及其他发表评论的人，我不确定您的问题是什么。我的猜测是您正在寻找 display: inline-block 和 white-space: nowrap。这样一来，无论可用空间如何，列表只会在您希望的位置出现换行符。

如果你真的想要overflow: hidden你仍然可以将它添加到第一级ol。尽管大多数时候隐藏内容并不符合用户的最佳利益。 (overflow: auto 也许？)

http://jsfiddle.net/QGkKD/1/

你真的应该使用列表来标记列表。

还有一件事。如果您对 HTML 和 CSS 有疑问，那么显示任何 Javascript 代码真的没有用。它只是掩盖了实际问题