0

在 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 中。

任何解决方案的想法将不胜感激！

4

1 回答 1

1

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

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

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

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

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

于 2013-01-26T22:43:11.243 回答