水平显示html控件

Question

我想以下列方式布局我的控件

并且不知何故我到目前为止都失败了。这是我到现在为止所尝试的：

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

你能帮帮忙吗？谢谢。

Demo

Answer 1

在列中切出该图像，您将看到，内容在列中对齐。创建列，使用包含所有/两行的DIV，并将它们排成一行。

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

之后，使用CSS浮点参数设置.column，并为每个.labels，.number，.inputs等设置固定宽度......

Answer 2

你没有清除浮子。在这种情况下，最好的方法是在样式中为所有<li>元素添加“clear：both”以及<ol>元素http://jsfiddle.net/eJvQa/4/