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'));

アプローチに関する私の問題: ツリーがコンテナよりも大きくなると、次の行に折り返されます。ただし、overflow:hidden の効果が必要です。コンテナのこの css タグは、左フローティング アイテムには影響しません。

jsFiddle: 例としてこの jsFiddle を参照してください : http://jsfiddle.net/Afasv/8/外側のコンテナよりも大きいdiv内にツリーを配置するハック。

解決策のアイデアをいただければ幸いです。

4

1 に答える 1

1

コメントした他の人たちと同様に、あなたの問題が何であるか正確にはわかりません。私の推測では、あなたは と を探していると思いdisplay: inline-blockますwhite-space: nowrap。そうすれば、使用可能なスペースに関係なく、リストには必要な場所にのみ改行が含まれます。

本当に必要overflow: hiddenな場合は、最初のレベルの ol に追加することもできます。ほとんどの場合、コンテンツを非表示にすることは、ユーザーにとって最善の利益にはなりません。(overflow: autoもしかして?)

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

また、リストをマークアップするにはリストを使用する必要があります。

もう一つ。HTML と CSS に問題がある場合、Javascript コードを表示しても意味がありません。実際の問題を隠しているだけです

于 2013-01-26T22:43:11.243 に答える