自動調整文本框的大小以適應可用空間

Question

我可以使用固定大小的行div來自動調整大小以獲取可用空間，但行div中的所有內容都在同一行中？ （下面的第一行將與第二行具有相同的寬度，因爲第二行中的輸入會自動縮小）。

<div class="row"> 
    <input type="text" /> 
</div> 

<div class="row"> 
    <span class="leftText">Text</span> 
    <input type="text" /> 
</div> 

http://jsfiddle.net/CqCax/

Answer 1

試試這個

- HTML

<div class="row"> 
    <input type="text" /> 
</div> 

<div class="row"> 
    <span class="leftText">Text</span> 
    <input type="text" /> 
</div> 

- CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.row { 
    display:table; 
    width: 200px; 
} 
span { 
    width: 1%; 
    padding-right: 10px; 
} 
input, span { 
    display:table-cell; 
} 
input { 
    width: 100%; 
} 

http://jsfiddle.net/9aAse/4/

它有點怪異的方式壽。

Answer 2

當然可以。

display: -webkit-flex; 

全碼： http://jsfiddle.net/frapporti/gXLeK/