ツリー状の列状にHTMLリストを表示する

Question

私はリスト

• 最初の記事
• 二記事
  • 回答へのようなものを生む

    <ul> 
    <li> first article </li> 
    <li> second article</li> 
    <ul> 
        <li> replies to second</li> 
        <li> different reply to second</li> 
    </ul> 
    <li> third article</li> 
    <ul> 
        <li> reply to third</li> 
        <ul> 
         <li> reply to the reply</li> 
        </ul> 
    </ul> 
    </ul> 
    

    を持っています秒

  • 別の返信を
• 第三の記事第
• reply3
• reply3
  • 応答に応答

に

• 返信

  は何私は基本的には自分の行のすべての内側のレベルを作るされて達成しようとしている：

  [first article] 
  [second article] 
  [rep2] [difrep2] 
  [third article] 
  [reply3] [reply3] [reply3] 
  [^3reply to the reply] 
  

  問題がある：私はリストの要素の周りにボックスを置くときは、ボックスには、親とすべての子孫/内部の要素が含まれています。私はリストの要素の周りにボックスが欲しいです、私は子供が新しい "行"に表示されるようにしたいです

  親のcssボックスの内側の要素を "キック"して表示させる方法はありますか新しい「行」？

  https://jsfiddle.net/qjf6tsf8/1/

  ^アップデート：このフィドルをご覧ください。フィドル「また別の子」で

  は、子要素を持っている、と私はそれらをボクシング再帰的「また別の子」の下に新しい行に入れ代わりにしたいと思います。参考のため

  ：https://jsfiddle.net/qjf6tsf8/（JSフィドルがちょうどLiとUL要素でツリー構造を示す、と私はdiv要素にそれらを変更した後、上リンク）

  

Answer 1

私はこれが

に動作すると思います

ul > ul 
{ 
display : inline-flex ; 
} 

Answer 2

まだアイテムを正しく表示することを決定していないと思います。あなたはレベルを、すべてのレベルで共通することのできない方法で違った考えをしているからです。明確にするために、項目replies to secondに注意してください。何か子供がいたら？ のようなクラス名を追加できます。あなたが同じ行に表示され、ページに休閑スタイルを追加したいすべての項目に同じ行：

.same-row{ 
    display: inline; 
} 

Answer 3

まず第一には、W3C HTML Validatorによると、任意の<ul>は<ul>の直接の子にすることはできません。

したがって、この構造

<ul> 
    <li> first article </li> 
    <li> second article</li> 
    <ul> 
    <li> replies to second</li> 
    <li> different reply to second</li> 
    </ul> 
... 

が実際に

<ul> 
    <li> first article </li> 
    <li> second article 
    <ul> 
     <li> replies to second</li> 
     <li> different reply to second</li> 
    </ul> 
    </li> 
... 

これにする必要があり、実際に解決することが、あなたの問題はそれほど難しくなります。 https://jsfiddle.net/tae2e7ea/を参照してください。

重要な部分は以下のとおりです。子を<ul>にするにはdisplay: blockを使用し、それ以外の場合はをとします。追加情報について

/* <ul> that are children of <li> should be on their own line */ 
li > ul { 
    display: block; 
} 

/* And the children of those <ul> should be all on one line */ 
li > ul > li { 
    display: inline-block; 
} 

編集：100％以来：あなたはアスカーから明確化した後<li>（のようなvertical-align: center）または<ul>（のようなpadding-left: 0）

編集に設定する必要がありますいくつかの追加のスタイルのためのフィドルを参照してください。このコントロールがJavaScript（AngularJS）で処理されているので、ツリーのような構造を維持するのではなく、ツリーのレベル別に整理することをお勧めします。そのアップデートについては、this Fiddleを参照してください。 JavaScriptを使用して、必要なレベルを表示/非表示にすることができます。または、AngledJSを使用して、「選択した」レベルのリストのみをレンダリングする必要があります。