Form horizontal layout with labels on top through css

Question

I'd like to have a form with several select controls in a horizontal (they are next to each other) layout and have labels on top of each select.

Like this:

Inline form fields with labels placed on top

How can I do that with css and using dform?

Answer 1

Best to just use an unordered list I think.

Float the LI elements to the left and give them some margin-right to space them.

You'll need a clearfixer element on the UL or it's parent to make sure the float works.

<ul>

<li><label>Label #1</label>
<select>
<option></option>
</select>
</li>

<li><label>Label #1</label>
<select>
<option></option>
</select>
</li>

<li><label>Label #1</label>
<select>
<option></option>
</select>
</li>

</ul>

Answer 2

Here is the answer using dform. Thank you for negative voting.

css for span... display:inline-block label and select... display : block

$('#myform').dform({ "action" : "dform.html", "method" : "get", "html" : [
{ "type": "span", "html": { "type": "select", "name": "Country", "caption": "Country", "class": "countries", "options": { "": "All", "USA": { "html": "USA", "class": "active" }, "Germany": { "html": "Germany", "class": "active" }, "France": { "html": "France", "class": "active" } }, "selected": null } } ] });