为什么文本框输入控件从父div中分离出来?

Question

我有以下HTML代码

<div style="background-color:Red;width:100px;height:100px;padding:5px;">
    <input type="text" class="text" id="txtExtraSubject" style="width:450px;"/>
</div>

在浏览器中运行时，div不会增长以适应更大的文本框，它看起来就像文本框刚刚打破了div。为什么会发生这种情况，如何解决?

Answer 1

因为width: 100px的意思是"The width is 100 pixels"而不是"The width is least 100 pixels"

你可以应用一个显示属性，使它收缩包装，并添加一个min-width代替。

(未测试:display: table; min-width: 100px;，其他的shirk包装方法，包括浮动内容(float: left))

Answer 2

您也可以在父类上使用overflow:auto;。

它将约束文本编辑到父div。但注意，它不会增加父div的宽度，因为宽度已经指定。结果将是一个水平滚动条。

如果不需要，可以减小文本输入的宽度，或者在父元素上使用min-width而不是width。

Answer 3

你为div指定了高度和宽度——为什么它会忽略你告诉它做的事情呢?

删除宽度或设置为460px(文本区域450px，填充10px)