HTML - 使用 CSS 自动调整文本框的大小，同时表单详细信息保持居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20186698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - Auto resize text box using CSS while the form details stays center aligned
提问by Ravi raj
I am not sure whether this Q is answered before. please advise if there is a way using CSS, I can achieve to center the Form elements centered and when user tries to resize the page, for me the elements should always get resiged to the page size.
不知道之前有没有回答过这个问题。请告知是否有使用 CSS 的方法，我可以实现将 Form 元素居中，并且当用户尝试调整页面大小时，对我来说，元素应始终调整为页面大小。
I need to achieve this using CSS, not through JS.
我需要使用 CSS 来实现这一点，而不是通过 JS。
回答by Ming
To have form elements horizontally centered, that will get wider as the browser window gets wider, and thinner as the browser window gets thinner, you can do this using CSS. However, you will need to contain it in something to do the horizontally centering.
要使表单元素水平居中，随着浏览器窗口变宽，它会变得更宽，随着浏览器窗口变薄而变薄，您可以使用 CSS 来做到这一点。但是，您需要将其包含在某些东西中以进行水平居中。
In my example I have used the form element itself to do the horizontal centering.
在我的示例中，我使用表单元素本身来进行水平居中。
form { width: 50%;
margin: 0 auto; }
form textarea,
form input { width: 100%; }
回答by Gildas.Tambo
based on setek answer you can use min-width, max-width, and calc
根据 setek 答案，您可以使用 min-width、max-width 和 calc
<form action="#" method="get">
<textarea cols="40" rows="5"></textarea>
<input type="text" name="given-name" />
<input type="text" name="family-name" />
</form>
the css
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%;
}
or
或者
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%;
}
Reading:
css3 calc
阅读：
css3 calc
