SCdF SCdF - 26 days ago 10
CSS Question

How do I make <li> with block elements sit beside each other?

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

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.

Comments