Pole wejściowe o szerokości 100%, z etykietą po lewej stronie

Question

Próbuję mieć pole wprowadzania płynu o szerokości 100%, a etykieta powinna znajdować się po lewej stronie. Oto, co aktualnie mam:

.left { 
    float: left; 
} 

input { 
    width: 100%; 
} 

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

Działa to, jednak spada poniżej etykiety. Jeśli użyję elementu nadrzędnego div, aby przypisać wartości zmiennoprzecinkowe, to nie będzie on wynosił 100%. Jakieś pomysły?

Dziękujemy!

Answer 1

Patrz:http://jsfiddle.net/r2769/(zmiana rozmiaru okna)

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> 

Wyjaśnienie metody is here.

Answer 2

Niedawno dowiedziałem się o Calc w CSS:

width: calc(100% - 100px); 

to może być wykorzystane, aby rozwiązać ten problem: 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); 
}