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是一个内联元素（实际上是内联块）。它不会从其父级继承其宽度，而是具有特定于浏览器的默认宽度。

更改CSS：

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

Answer 2

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

Answer 3

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

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

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

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

3 个答案: