CODEWITHSUNDEEP
htmlcss
metalaureate
metalaureate

Reputation: 7732

CSS splitting hierarchical list into horizontally arranged hierarchies

I have an ordered list with multiple top level nodes that I need to lay out horizontally (while retaining vertical layout of child nodes). E.g., for a basic list markup such as:

<ol>
     <li>Top 1
          <li>Sub 1</li>
          <li>Sub 2</li>
     </li>
     <li>Top 2
          <li>Sub 1</li>
          <li>Sub 2</li>
     </li>
</ol>

Instead of rendering these as a vertically stacked hierarchy, each top level node would start a new column

I.e., instead of

Top 1
    Sub 1
    Sub  2
Top 2
    Sub 1
    Sub 2

It would be rendered

Top 1            Top 2
   Sub 1            Sub 1
   Sub 2            Sub 2

etc. My list markup has up to a dozen top-level nodes and is nested 5 deep in some areas.

I know how to render the whole list horizontally, but stumped how to render the top-level node horizontally but all its children vertically.

Thanks for any help!

Upvotes: 0

Views: 167

Answers (1)

Fahad Hasan
Fahad Hasan

Reputation: 10506

Your mark-up is a little incorrect, you need to wrap the child <li>'s inside with another <ol> so that your mark-up looks like this:

<ol>
    <li>Top 1
        <ol>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ol>
    </li>
    <li>Top 2
        <ol>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ol>
    </li>
</ol>

Next, using the following CSS, you can achieve what you're trying to do:

ol li {
    display: inline-block;
}
ol li ol li {
    display: block;
}
ol ol {
    padding-left: 5px
}

Here's a working demo:

ol li {
  display: inline-block;
}
ol li ol li {
  display: block;
}
ol ol {
  padding-left: 5px
}
<ol>
  <li>Top 1
    <ol>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ol>
  </li>
  <li>Top 2
    <ol>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ol>
  </li>
</ol>

Upvotes: 2

Related Questions