html - 水平显示 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>

之后，为每个 .labels、.number、.inputs 等设置带有 CSS float 参数和固定宽度的 .column...