Question

I have a mockup layout for something here. Essentially there are sections, columns and fields, which are all written as a combination of <ul> and <li> elements. This is done specifically for later parsing.

A snippet of the HTML:

<li class='layout'><span class='type'>[Column] </span>     <ul class='layout-children'>         <li class='field'><span class='type'>[Text] </span>A field</li>         <li class='field'><span class='type'>[Text] </span>Another field</li>         <li class='field'><span class='type'>[Text] </span>Yet another field</li>     </ul> </li> <li class='layout'><span class='type'>[Column] </span>     <ul class='layout-children'>         <li class='field'><span class='type'>[Text] </span>More fields</li>         <li class='field'><span class='type'>[Text] </span>And one more field</li>     </ul> </li> 

If you go to the linked content you’ll note that those columns sit vertically. I want the columns to sit beside each other, but I am not sure how to go about it.

It would be preferable if the HTML didn’t change, just the CSS.

Answer 1

I just added this to your css:

ul .section-children li.layout {     display : inline-block; } 

Unfortunately, I don’t know how well supported inline-block is nowadays.