Question

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

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

标签和输入字段的长度也各不相同，所以我无法定义每行的最大字段数是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：http://codepen.io/anon/pen/ZbOJJa

表格替代：网格列表

1 个答案: