入力ボックス100％幅、左側のラベル

Question

ラベルを左に浮かべた状態で、流体入力ボックスの幅を100％にしようとしています。現在持っているものは次のとおりです。

.left { 
    float: left; 
} 

input { 
    width: 100%; 
} 

<form> 
    <label class="left">Name:</label> 
    <input class="left" id="name" name="name"/> 
    <div class="clear"></div> 
</form> 

これは機能しますが、ラベルの下に落ちます。フロートを割り当てるために親divを使用すると、100％には及ばない。何か案は？

ありがとうございました！

Answer 1

を参照してください：http://jsfiddle.net/r2769/（ウィンドウのサイズを変更する）

CSS：

.left { 
    float: left; 
} 

.left2 { 
    overflow: hidden; 
    display: block; 
    padding: 0 4px 0 10px 
} 
.left2 input { 
    width: 100% 
} 

HTML：

<form> 
    <label class="left" for="name">Name:</label> 
    <span class="left2"><input id="name" name="name" /></span> 
</form> 

is hereの説明。

Answer 2

私は最近、CSSのカルク知った：

width: calc(100% - 100px); 

がこの問題を解決するために使用することができます。jsfiddle here

HTML：

<div class="setting"> 
    label 
    <input class="s2"/> 
</div> 

はCSS：

.setting { 
    position: relative; 
    width: 100%; 
} 
.setting .s2 { 
    position: absolute; 
    left: 180px; 
    width: calc(100% - 184px); 
}