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

之后，设置.COLUMN用CSS的float参数和固定宽度为每个.labels，。数，.inputs的等等...

Answer 2

你没有清除浮动。在这种情况下个最好的办法是添加“明确：既”在样式所有<li>元素以及为<ol>元素http://jsfiddle.net/eJvQa/4/