如何使多列直线元素宽度拉伸100％

Question

有没有办法让多个内联块元素宽度拉伸到100％？

HTML：

<div>
  <select>
    <option>area code</option>
  </select>
  <input type="text" style="width:20%">
  -
  <input type="text" style="width:20%">
  -
  <input type="text" style="width:20%">
</div>

Answer 1

您是否在寻找类似的内容： Demo Link

<强> CSS：

.form {
    width:100%;
}
.controls {
    display:inline-block;
    width:20%;
    margin:0 5px;
}
.controls select, .controls input {
    width:100%;
    border:1px solid #ccc;
}

Answer 2

是的，你可以 - 但请注意，inline-block元素之间有一些额外的不必要的间距，如隐形边距，可以使用Chris强调的 this page 。我喜欢使用＆＃34;删除空格＆＃34;技术

我包裹了连字符＆＃34; - ＆＃34;在div中，我们也可以为他指定百分比宽度。

此外，输入字段已分配box-sizing: border-box;，因此其填充是其宽度的一部分。

<强> Here is the DEMO

<强> HTML：

<div class="wrap">
    <select>
        <option>area code</option>
    </select
    ><input type="text" 
    /><div class="sperator">-</div
    ><input type="text" 
    /><div class="sperator">-</div
    ><input type="text" />
</div>

<强> CSS：

.wrap > *{
    display: inline-block;
    width: 24%;
}
.wrap > *.sperator{
    width: 2%;
    text-align: center;
}
input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 3

的CSS

#f1 {
    width:100%;
    font-size:0;
}
.controls {
    display:inline-block;
    width:23%;
    margin:0 2% 0 0;
}
.controls select, .controls input {
    width:100%;
    border:1px solid #ccc;

}

HTML

 <div id="f1">
    <div class="controls">
        <select>
            <option>area code</option>
        </select>
    </div>
    <div class="controls">
        <input type="text"  />
    </div>
    <div class="controls">
        <input type="text"  />
    </div>
    <div class="controls">
        <input type="text"  />
    </div>
</div>

宽度为100％