用按钮拉伸文本字段以填充父div

Question

我有一个div <div id="ab">，其中包含文字字段<input type="text" class="a" />和提交按钮<input type="submit" value="Test" class="b" />。 div有固定的高度，长度为100％。文本字段具有特定高度。提交按钮仅具有特定高度。我希望Text字段拉伸整个div（宽度），留下空间让提交按钮停靠。设置宽度百分比不起作用;

定型;

#ab{
    background-color: #CCCCCC;
    width: 100%;
    height: 36px;
    border: solid 1px #999999;
}
#ab .a{
    display: block;
    float: left;
    border: none;
    height: 34px;
}
#ab .b{
    display: block;
    float: left;
    border: none;
    width: 100px;
    height: 36px;
}

HTML;

<div id="ab">
  <input type="text" class="a" />
  <input type="submit" value="Test" class="b" />
</div>

我得到了这个;

我想要这个;

Here 是小提琴。

我怎么能用css做到这一点？

Answer 1

你可以用表格来实现

HTML

<div id="ab">
  <table>
     <tr>
         <td><input type="text" class="a" /></td>
         <td class="right"><input type="submit" value="Test" class="b" /></td>
     </tr>        
  </table> 
</div>

CSS

#ab{
background-color: #CCCCCC;
height: 36px;
border: solid 1px #999999;
width: 100%;
}
table{
    width:100%;      
}
.right{
    width:100px;
}
#ab .a{
    display: block;
    border: none;
    height: 34px;
    width:100%;
}
#ab .b{
    display: block;
    border: none;
    width: 100%;
    height: 36px;
}

Answer 2

实现这一目标的最简洁方法是给予#ab一个固定的宽度。那是纯数学。

或者你这样做：

#ab .a{
    width:100%; /* << */
    display: block;
    float: left;
    border: none;
    height: 34px;
}
#ab .b{
    margin: 0 0 0 -100px; /* << */
    display: block;
    float: left;
    border: none;
    width: 100px;
    height: 36px;
}

如果您希望其宽度包含可选的填充，请同时将box-sizing: border-box;应用于.a。

.a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Answer 3

如果你必须让按钮为100px而不是变量（有百分比），那么就没有办法用纯CSS做到这一点。你不能说宽度：（100％-100px），所以我建议用Jquery设置它：

这是小提琴：http://jsfiddle.net/jesseclark/rXKqv/