HTML - 使用CSS自動調整文本框的大小，但窗體細節保持居中對齊

Question

我不確定此Q是否在之前得到了回答。請告知如果有使用CSS的方法，我可以實現將居中的表單元素居中，當用戶嘗試調整頁面大小時，對於我來說，元素應該始終保持爲頁面大小。

我需要實現這個使用CSS，而不是通過JS。

Answer 1

要使表單元素水平居中，當瀏覽器窗口變得更寬時會變得更寬，而當瀏覽器窗口變薄時變得更薄，可以使用CSS來做到這一點。但是，您需要將其包含在某些內容中才能進行水平居中。

在我的例子中，我使用了表單元素本身來做水平居中。

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

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

Answer 2

基於setek答案可以使用最小寬度，最大寬度，以及計算值

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

或

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

閱讀：
css3 calc

CSS max-width Property