拉伸文本字段按钮，以填补父DIV

Question

我有一个div <div id="ab">包含一个文本字段<input type="text" class="a" />和一个提交按钮<input type="submit" value="Test" class="b" />。 div的高度固定，长度为100％。文本字段具有特定的高度。提交按钮只有特定的高度。我希望文本字段可以拉伸整个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

实现这个最简洁的方法是给#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 2

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

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

Answer 3

您可以实现与表

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