HTML - automatyczna zmiana rozmiaru pola tekstowego za pomocą CSS, gdy szczegóły formularza pozostają wyrównane do środka - css, html5, css3, css-float

Nie jestem pewien, czy odpowiedź na to pytanie jest już wcześniej. proszę o podanie, czy istnieje sposób używania CSS, mogę osiągnąć wyśrodkowanie elementów Formu w środku i kiedy użytkownik próbuje zmienić rozmiar strony, dla mnie elementy powinny zawsze zostać dostosowane do rozmiaru strony.

Muszę to osiągnąć za pomocą CSS, a nie poprzez JS.

Odpowiedzi:

Aby mieć elementy w poziomie wyśrodkowane, torozszerzy się, gdy okno przeglądarki stanie się szersze, a cieńsze, gdy okno przeglądarki stanie się cieńsze, możesz to zrobić za pomocą CSS. Będziesz jednak musiał to zawrzeć w czymś, co można zrobić centralnie.

W moim przykładzie użyłem samego elementu formularza do centrowania poziomego.

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

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

na podstawie odpowiedzi setek możesz użyć min-width, max-width i calc

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

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%;
}

lub

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%;
}

Czytanie:
css3 calc

Właściwość o maksymalnej szerokości CSS