Horizontal CSS Layout

Question

I'm trying to learn to do things the "CSS" way as opposed to using tables. I have a basic form that needs to be layed out like the following:

Label 1: [Drop Down List]     Label 2: [Drop Down List]   Label 3: Drop Down List

Collectively, the three will be left aligned and NOT take up the entire width of the screen. However, the sizes of the drop down list elements will be dynamic based on the data that fills them. If I were using a table, I would just do the following:

<table border='0' cellpadding='0' cellspacing='0'>
  <tr>
    <td>Label 1:&nbsp;</td>
    <td style='padding-right:12px;'><select>...</select></td>

    <td>Label 2:&nbsp;</td>
    <td style='padding-right:12px;'><select>...</select></td>

    <td>Label 3:&nbsp;</td>
    <td style='padding-right:12px;'><select>...</select></td>
  </tr>
</table>

Unfortunately, I'm not sure how to do this via CSS. Any insights are appreciated.

Thank you!

Answer 1

You can just put all the elements after each other in the HTML and give the label elements display:inline-block and margin-left: 50px.

HTML

<label>Label 1 <select>...</select></label> 
<label>Label 2 <select>...</select></label> 
<label>Label 3 <select>...</select></label>

CSS

label {
 display: inline-block; /* perhaps not needed, as commented by cimmanon */
 margin-left: 50px;
}

Live demo
http://jsfiddle.net/Ezgtq/1/

Answer 2

Label: <select>....</select>
Label: <select>....</select>
Label: <select>....</select>

CSS:

select {
display:inline-block;
margin-left:12px;
width:40px; /* What You Want */
}

JS Fiddle