顯示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/