表的替代方案：網格列表

Question

我有一個包含10-20個輸入類型文本字段及其標籤的表單。元素的數量各不相同，所以我在尋找一個解決方案輸出所有字段和標籤，讓他們自動調節到一個網格：

Label1: [________] Label2: [____] Label3: [________] 
Label4: [___]  Label5: [__________] 
Label6: [_______________]   Label7: [________] 
Label8: [________________________________] 

標籤和輸入框的長度也有所不同，所以我能」 t定義，每行的最大字段數是3。

這是可能與CSS（即flexbox），或者我必須使用jQuery嗎？

Answer 1

你可以做下面的：

<div class="wrap"> 
    <div> 
    <div class="formElement"><label>label</label><input type="text" /></div> 
    <div class="formElement custom"><label>label</label><input type="text" size="4" /></div> 
    <div class="formElement"><label>label</label><input type="text" /></div> 
    </div> 

    <div> 
    <div class="formElement"><label>label</label><input type="text" /></div> 
    <div class="formElement"><label>label</label><input type="text"/></div> 
    </div> 

    <div> 
    <div class="formElement"><label>label</label><input type="text" /></div> 
    </div> 

</div> 

和CSS

.wrap{ 
    width: 600px; 
} 

.wrap > div{ 
    display:flex; 
    margin: 5px 0 
} 

.formElement{ 
    flex: 1 1 auto; 
    display: flex; 
} 

label{ 
    margin:0 5px; 
} 

input{ 
    flex: 1 1 auto; 
} 

.custom{ 
    flex: 0 1 auto; 
} 

Codepen這裏：