Styling a row of labels and drop down lists with CSS

Question

What would be the way to style a bunch of label/drop down lists in a row but, where each drop down list has a label right above it.

Currently I have in my HTML:

<label for="select1">Label1</label>
<select id="select1">...<select>

<label for="select2">Label2</label>
<select id="select1">...<select>

<label for="select3">Label3</label>
<select id="select3">...<select>

By default, they all line up in one row. If I apply this style

label {
display:block;
}

I get all of them lined up in one column, for the lack of the better word.

So how would I style them so that a bunch of label/drop down lists in a row but, where each drop down list has a label right above it? No tables of course.

Answer 1

Update: Refined Cross-browser Display

Not quite sure what your final goal is, but if I interpreted correctly, I think something like this updated fiddle demonstrates is what you are going for, which uses this (requires setting an explicit width to work with):

CSS

label, select {
    display: inline-block;
    width: 100px;
}

label {
    position: relative;
    top: -1.2em;
    left: 5px;
}

select {
    margin: 1.5em 0 0 -100px;
}

Update for Multiple Rows

Set a wrapper element of fixed width like this fiddle to cause the rows to wrap.