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

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

In your <UL> tag use the css attribute "list-style:none;" and in the <li> tag use the css attribute "display:inline;" you'll have to play around with the padding and margin to make it look good, but those two attributes will get you on your way. For a better example see my Non-Profit website: Technically Learning

Answer 2

How about this:

.layout { float: left; width: 50%; margin: 0; border: 0; padding: 0; /* background: transparent */ }
* html .layout { display: inline } /* IE margin hack */
.field { clear: both }

Answer 3

yeah using display:block it would be impossible to make them sit beside each other unless if you'd try to specify a width for each of them but if that's the case just use display:inline

Answer 4

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 nodwadays.

Answer 5

display: -moz-inline-box;
display: inline-block;

Answer 6

Excellent resource:

http://css.maxdesign.com.au/listamatic/

Answer 7

Just an alternative to using inline elements since IE has had a history of padding problems with inline:

.layout-children:after
{
  content: "";
  display: block;
  height: 0px;
  clear: both;
}

.layout-children .field
{
  float: left;
}

Answer 8

Using inline or inline-block is going to be nothing but trouble. It's a much better idea to use floats as @Dmitry Z has suggested (but without the margin hack, which isn't necessary).

Answer 9

A simple float: left will work (with a minor adjustment for the width)

li {
 margin: .5em 1em;
 padding: .1em;

 font-family: sans-serif;
 list-style-type: none;
 border: 1px #666 solid;
 float: left;
}
#layout-section {
 width: 85%;
}