html - 子元素与父元素的宽度不同

Question

这似乎是一个简单的问题 - 我有以下 html

    <div class="question" id="someQuestionId">
    <input type="text" disabled="disabled" class="creation"/>
</div>

和以下CSS-

.creation{
    height:75%;
}
.creation,textarea{
    background-color:#F2FBEF;
}
.question{
    width:150px;
    height:100px;
    background-color:#0B3B24;


}

但是，输入框的宽度小于包含它的 div 的宽度 - 为什么会发生这种情况？我认为宽度应该是继承的？

Answer 1

input is an inline element (inline-block actually). It doesn't inherit its width from its parent, but has a browser-specific default width instead.

Change the CSS:

.creation{
    height:75%;
    /* Either: */
    width: 100%;
    /* or */
    display: block;
}

Answer 2

输入或任何表单元素不会继承其父元素的宽度。

要使其与父对象的宽度相同，您只需指定它的宽度、填充和边框以匹配其父对象。

http://jsfiddle.net/24xd8/

<div>
 <input type="text" />
</div>​

div {
 width:150px;
 height:130px;
 padding-top:20px;
 background:#999;
}
input {
 width:138px;
 border:1px solid #000;
 padding:5px;
}

Answer 3

这可能是因为浏览器通常有自己的默认样式（宽度、填充、边距等），它们赋予某些 DOM 元素。如果要删除所有这些默认浏览器样式，则应该使用 CSS 重置。您还可以专门为输入元素指定所需的 CSS。