css - 为什么文本框输入控件会脱离父 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 表示“宽度为 100 像素”而不是“宽度至少为 100 像素”。

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

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