displaying html lists in a tree-like row-like fashion - html

Question

I have a list
<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>
Which begets something like
first article
second article
replies to second
different reply to second
third article
reply to third
reply3
reply3
reply to the reply
What i'm trying to achieve is basically make every inner level it's own row:
[first article]
[second article]
[rep2] [difrep2]
[third article]
[reply3] [reply3] [reply3]
[^3reply to the reply]
The problem is: when I put a box around list elements, the box contains the parent and all the descendent/inner elements. I want a box around the list element, and I would like the children to appear on a new "row"
Is there any way to "kick" the inner list elements out of their parent's css box so that they appear on a new "row" ?
https://jsfiddle.net/qjf6tsf8/1/
^Update: please check out this fiddle.
In the fiddle "yet another child" has children elements, and I'd like to put them in a new row below "yet another child" instead of recursively boxing them up.
For reference: https://jsfiddle.net/qjf6tsf8/ (js fiddle showing the tree structure with just li and ul elements, and then the upper link I've changed them to divs)

Answer 1

First off, according to W3C HTML Validator, any <ul> cannot be the direct child of a <ul>.
So this structure
<ul>
<li> first article </li>
<li> second article</li>
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
...
Should actually be
<ul>
<li> first article </li>
<li> second article
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
</li>
...
This actually makes your issue less difficult to resolve.
See https://jsfiddle.net/tae2e7ea/.
The important part is below. Use display: block to put the child <ul> on its own line, then display: inline-block for the <li> children.
/* <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 for additional info: See the fiddle for some additional styles you may need to set on the <li> (like vertical-align: center) or <ul> (like padding-left: 0)
Edit after clarifications from asker: Since 100% width is desired and this control is being handled with JavaScript (AngularJS), I recommend organizing by levels in the tree instead of maintaining the tree-like structure you started with. See this Fiddle for that update. JavaScript can then be used to show/hide the necessary levels. Or rather, AngularJS should be used to only render the lists for the "chosen" level.

Answer 2

i think this will work
ul > ul
{
display : inline-flex ;
}

Answer 3

I think you have not decided to display items correctly yet. Because you have think of levels differently in a way that can not be common for all levels. For clarity pay attention to item replies to second. What if it had some children?! You can add a class name like .same-row to every item you want to be displayed in a same row and add fallowing style to your page:
.same-row{
display: inline;
}