努力與動態內容

Question

我拉從一個標籤作爲標題的形式創建選擇列表中的web服務的一些內容無表格的控制。規則是選擇列表必須排列並堆疊在一起，然後佔用標籤不佔用的屏幕空間的其餘部分。

我可以用表來創建他們做到這一點，但要尋找一個更純粹的CSS途徑，如果可能的。 「：表顯示」，「顯示：錶行」，「顯示：表單元格」

使用的div的結合嘗試，但我無法得到堆疊效果才能正常工作。

看到我期待看到效果：http://jsfiddle.net/9dX6F/3/

Answer 1

您可以嘗試類似的措施：http://jsfiddle.net/ZcvvR/1/

label { 
    display: block; 
    overflow: hidden; 
    padding-bottom: 5px; 
} 

label .label { 
    display: block; 
    float: left; 
    width: 150px; 
} 

label .input { 
    display: block; 
    margin-left: 160px; 
} 

label select { 
    width: 100%; 
} 

<label class="row"> 
    <span class="label">Label name one</span> 
    <span class="input"> 
     <select> 
      <option>Select item</option> 
     </select> 
    </span> 
</label> 

<label class="row"> 
    <span class="label">Label name two</span> 
    <span class="input"> 
     <select> 
      <option>Select item</option> 
     </select> 
    </span> 
</label> 

<label class="row"> 
    <span class="label">Label name three</span> 
    <span class="input"> 
     <select> 
      <option>Select item</option> 
     </select> 
    </span> 
</label> 

它涉及到標籤欄被設置爲靜態的寬度，雖然如此，如果你需要這個列來拉伸或縮小，它可能不適合你。儘管如此，標籤文本將換行到下一行。