отображение 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 скрипку, показывающий структуру дерева с только Ли и ул элементов, а затем верхнего звена я изменил их дивы)

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/.

Важная часть приведена ниже. Используйте display: block, чтобы положить ребенка <ul> на свою линку, затем display: inline-block для детей <li>.

/* <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; 
} 

Edit для получения дополнительной информации: См скрипку для некоторых дополнительных стилей вы, возможно, потребуется установить на <li> (как vertical-align: center) или <ul> (как padding-left: 0)

Edit после уточнений от спрашивающего: С 100% требуется ширина, и этот контроль обрабатывается с помощью JavaScript (AngularJS). Я рекомендую организовать уровни в дереве вместо того, чтобы поддерживать древовидную структуру, с которой вы начали. См. this Fiddle для этого обновления. Затем JavaScript можно использовать для отображения/скрытия необходимых уровней. Вернее, AngularJS следует использовать только для составления списков для «выбранного» уровня.