CODEWITHSUNDEEP
htmlcss
sova
sova

Reputation: 5650

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

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

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)

desired effect for list-to-rowtree

Upvotes: 3

Views: 1152

Answers (3)

Andrew Messier
Andrew Messier

Reputation: 834

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.

Upvotes: 1

Amin
Amin

Reputation: 219

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

Upvotes: 0

melbx
melbx

Reputation: 319

i think this will work 

ul >  ul 
{
 display : inline-flex ; 
}

Upvotes: 0

Related Questions