拉伸文本字段按鈕，以填補父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; 
}