为什么 <textarea> 和 <input> 元素不尊重最大宽度？
以下 HTML：
<!DOCTYPE html>
<style>
span,textarea,div {
border: 1px solid black;
max-width: 300px;
height: 20px;
}
</style>
<div></div><br>
<textarea></textarea><br>
<input type=text><br>
在 Chrome 和 FF 中呈现以下内容。
为什么 the<textarea>和 the<input>不像the那样宽<div>？
大多数浏览器都尊重max-width，但是INPUT和TEXTAREA元素通常在用户代理 CSS 中默认设置宽度。您可以添加此 CSS 以获得一致的渲染：
input,textarea{width:100%;display:block}
- @Shadow 向导：jsfiddle 没有演示`textarea` 或`input` 元素的工作`max-width`：随着屏幕宽度的减小，它们不会变窄。 (2认同)
今天早上遇到了这个问题。虽然第一个答案与我的有关，但我觉得有必要进一步解释：
工作演示：jsFIDDLE Demo
1) 如上所述，首先将输入设置为 css 文件顶部的 100% 宽度很重要：
input,textarea {
width:100%;
display:block }
2) 默认情况下，输入现在将扩展父 div 长度的 100%。所以如果要实现“最大宽度”，则需要在父 div 中设置宽度属性。
.input-container {
max-width: 300px; }
3) 给父div 添加padding 给输入的右边/左边一个固定的空间
.input-container {
padding: 25px 25px;
max-width: 300px; }
如果有不清楚的地方，请告诉我。