Displaying html controls horizontally

I want to layout my controls in the following way

and somehow I have failed with it till now.. Here is what I have tried till now:

   <div style="">
    <label style="float: left">
        Products:</label>
    <ol style="list-style: decimal">
        <li id="product" style="margin-left: 10px">
            <select style="float: left; width: 100px;">
                <option>Product A</option>
                <option>Product B</option>
                <option>Product C</option>
            </select>
            <input type="text" value="40" style="width: 20px; float: left;" />
            <a style="float: left;">Delete</a> </li>
        <li id="product" style="margin-left: 10px">
            <select style="float: left; width: 100px;"开发者_开发技巧>
                <option>Product A</option>
                <option>Product B</option>
                <option>Product C</option>
            </select>
            <input type="text" value="40" style="width: 20px; float: left;" />
            <a style="float: left;">Delete</a> </li>
    </ol>
</div>

Can you please help? Thanks.

Demo

---

Chop that image in columns, you will see, content is aligned in columns. Create columns, use DIV's containing all/both rows, and align them in one row.

<div class="column labels">
<div class="row">Products:</div>
</div>
<div class="column numbers">
<div class="row">1.</div>
<div class="row">2.</div>
</div>
<div class="column inputs">
<div class="row"><input type="text" /></div>
<div class="row"><input type="text" /></div>
</div>

After that, set .column with CSS float parameter and fixed width for each of .labels, .number, .inputs and so on...

---

you didn't clear your floats. Th best way in this case would be to add "clear:both" in styles to all <li> elements as well as to <ol> element http://jsfiddle.net/eJvQa/4/