html - 使用响应式输入+标签制作表单框

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;
}