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

Question

我需要制作一个具有不固定宽度的表单弹出窗口(基于另一个元素的宽度，而另一个元素的宽度又基于页面的宽度)。

弹出窗口应显示 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;
}