elementi fluidi in ingresso

Question

ho ottenuto questo modulo ...

<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>"> 
    <fieldset> 
     <legend>Who are you?</legend> 
     <label for="first-name">First name</label><input type="text" name="first_name" required /><br /> 
     <label for="last-name">Surname</label><input type="text" name="last_name" required /><br /> 
     <label for="email">E-mail</label><input type="email" name="email" required /><br /> 
     <input type="button" name="submit1" id="submit1" value="Next" /> 
     <input type="button" name="clear" id="clear" value="Clear" /> 
    </fieldset> 
</form> 

Con questo CSS ...

form { 
    margin: 24px 0 0 0; 
} 

form legend { 
    font-size: 1.125em; 
    font-weight: bold; 
} 

form fieldset { 
    margin: 0 0 32px 0; 
    padding: 8px; 
    border: 1px solid #ccc; 
} 

form label { 
    float: left; 
    width: 125px; 
} 

form label, form input { 
    margin: 5px 0; 
} 

che sto cercando un modo semplice per rendere l'ingresso campi fluidi in modo che la larghezza di gli elementi di input sono sempre relativi alla larghezza dell'elemento fieldset. In altre parole, la larghezza dell'etichetta (125 px) e l'elemento di input dovrebbero sempre essere al 100% della larghezza dell'elemento fieldset. C'è un modo semplice per farlo (senza aggiungere div)?

Answer 1

See:http://jsfiddle.net/thirtydot/pk3GP/

Si può fare questo con l'aggiunta di un innocuo piccolo span attorno ad ogni input:

<span><input type="text" name="first_name" required /></span> 

E questo nuovo CSS:

form input { 
    width: 100%; 
} 
form span { 
    display: block; 
    overflow: hidden; 
    padding: 0 5px 0 0; 
}