Making Tables Out of Hierarchical Lists in CSS

Question

This should be easy, or perhaps impossible :)

I have this kind of HTML output

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

and I would like it to appear as

one two three
    a   b 

how can I do this with pure CSS? I can modify the HTML to some extent if necessary (but I would rather not).

Answer 1

You could accomplish this with some floats and absolute positioning

ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul.first {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 30px; left: 0; margin-top: 30px;}
ul.second {position: absolute; top: 30; left: 50;}

and

<ul class="first">
   <li>one</li>
   <li>two
      <ul class="second">
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

Answer 2

You're asking about "pure" CSS. Pure CSS is to use the best semantic tag for the job, and that means that if you really have tabular data, which this looks like it might be, than you should use a table.

Answer 3

You can use the css tag "list-style-type:none" ie

ul li { list-style-type: none; display: inline; }

ul li ul li { list-style-type: none; display: inline; }

Answer 4

To take Zac's answer a little further, you can do the CSS addressing without modifying the HTML whatsoever. Then it would look like this:

<style>
ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul  {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 20px; left: 0; margin-top: 30px;}
ul li ul {position: absolute; top: 20; left: 0;}
</style>

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>