我想按以下方式布局我的控件
不知何故,直到现在我都失败了。这是我到目前为止尝试过的方法:
<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>
你能帮忙吗?谢谢。
最佳答案
将该图像分成几列,您会看到,内容按列对齐。创建列,使用包含所有/两行的 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...
关于html - 水平显示 html 控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7229183/