HTML - Ridimensiona automaticamente la casella di testo usando CSS mentre i dettagli del modulo rimangono allineati al centro - css, html5, css3, css-float

Non sono sicuro se questo Q sia stato risposto prima. Si prega di avvisare se c'è un modo di usare i CSS, che posso ottenere per centrare gli elementi del modulo centrati e quando l'utente prova a ridimensionare la pagina, per me gli elementi dovrebbero sempre essere ridimensionati alle dimensioni della pagina.

Ho bisogno di farlo usando i CSS, non attraverso JS.

risposte:

Per avere elementi del modulo centrati orizzontalmente, quellodiventerà più ampio man mano che la finestra del browser si allargherà e, man mano che la finestra del browser diventerà più sottile, sarà possibile farlo usando i CSS. Tuttavia, sarà necessario contenerlo in qualcosa per centrare orizzontalmente.

Nel mio esempio ho usato l'elemento del modulo stesso per fare il centraggio orizzontale.

http://jsfiddle.net/HZkft/1/

form { width: 50%;
margin: 0 auto; }
form textarea,
form input { width: 100%; }

in base alla risposta setek puoi usare min-width, max-width e calc

<form action="#" method="get">
<textarea cols="40" rows="5"></textarea>
<input type="text" name="given-name" />
<input type="text" name="family-name" />
</form>

il css

form {
min-width: 200px;/* set the min width here */
width: 50%;
max-width: 400px;/* set the max width here */
margin: 0 auto;
}
form textarea,
form input {
width: 100%;
}

o

form {
min-width: 200px;
width: -webkit-calc(100% -20px);
width: -moz-calc(100% -20px);
width: calc(100% -20px);
max-width: 400px;
margin: 0 auto;
}
form textarea,
form input {
width: 100%;
}

Lettura:
css3 calc

Proprietà massima larghezza CSS