table 备选方案：网格列表

Question

我有一个包含 10-20 个输入类型文本字段及其标签的表单。元素的数量不同，所以我正在寻找一种解决方案来输出所有字段和标签并让它们自动调整为网格：

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

标签和输入字段的长度也各不相同，所以我无法定义每行的最大字段数，即三个。

这可以用 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 在这里：http://codepen.io/anon/pen/ZbOJJa

table 备选方案：网格列表

table alternative: grid list

html

css

jquery

flexbox