使用响应式输入+标签制作formbox

Question

我需要创建一个具有未固定宽度的formbox-popup（基于另一个元素的宽度，而该另一个元素的宽度又取决于页面的宽度）。

弹出窗口应显示1/2/3 / n列，具体取决于弹出窗口的宽度。

这是我目前的代码示例：
http://codepen.io/FezVrasta/pen/eItyu

.box {
  width: 500px;
  outline: 1px solid purple;
  .row {
    display: inline-block;
    label {
      display: inline-block;
      width: 50px;
    }
    input {
      width: 120px;
    }
  }
}

问题是我需要一种方法来使输入+标签足够大以填充整个盒子的宽度。

所以我的例子应该是这样的：
http://codepen.io/FezVrasta/pen/cIDFs

我能找到的唯一解决方案是使用媒体查询，但它看起来并不是一个非常干净的解决方案。

我该如何解决这个问题？

Answer 1

如何使用CSS表：

<强> FIDDLE

标记

<div class="box">
    <div class="row">
        <label>label</label>
        <input type="text" />
    </div>
     <div class="row">
        <label>label</label>
        <input type="text" />
    </div>
</div>

CSS

.box {
  width: 500px;
  outline: 1px solid purple;
  display:table;
}
  .row {    
    width: 50%;
    display: table;
    float:left;    
}
label {

    width: 50px;
    display: table-cell; 
}
input {
    display: table-cell;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

你可以通过javascript或jquery来做，如果你想显示一列，这里有一个例子

$('input').each(function(index,input){
  var _this = $(input);

  //box width
  var w1 = _this.parent().width();
  //label width
  var w2 = _this.prev().width();

  _this.css('width',w1 - w2);
});

Answer 3

我认为您应该使用自适应对象，因为您提到列的数量可能会有所不同，我的提案是响应式设计，因此您需要添加数量弹出窗口宽度上的列，所以媒体查​​询，如你所说，是最合适的解决方案（在我看来）：

fiddle

HTML：

<div class="box">
    <div class="row">
         <label for="input">Label:</label>
        <input type="text" id="input"/>
    </div>
    <div class="row">
         <label for="input">Label:</label>
        <input type="text" id="input"/>
    </div>
    <div class="row">
         <label for="input">Label:</label>
        <input type="text" id="input"/>
    </div>
    <div class="row">
         <label for="input">Label:</label>
        <input type="text" id="input"/>
    </div>
    <div class="row">
         <label for="input">Label:</label>
        <input type="text" id="input"/>
    </div>
    <div class="row">
         <label for="input">Label:</label>
        <input type="text" id="input"/>
    </div>
</div>

的CSS：

.box{
    width:100%;
}
.row {
    float:left;
}
.row label{
    display:inline-block;
    width:25%;
}
.row input{
    width: 68%;
}

@media screen and (min-width:250px){
    .row{width:100%;}
}
@media screen and (min-width:500px){
    .row{width:50%;}
}
@media screen and (min-width:750px){
    .row{width:33%;}
}
@media screen and (min-width:1000px){
    .row{width:25%;}
}
@media screen and (min-width:1250px){
    .row{width:20%;}
}