为什么孩子输入字段比父DIV

Question

HTML

<div class="wrap"> 
    <input class="field" type="text"> 
    <textarea class="field" row="10"></textarea> 
</div> 

CSS

.wrap{width:300px;overflow:hidden;padding:10px;} 
.field{display:block;width:100%;margin:10px 0;padding:10px;} 

我希望文字输入和文本区域的宽度应该正好等于父DIV宽。但他们不是。任何人都可以解释为什么？

Live code

Answer 1

总宽度被计算为padding + width + borderWidth的总和。这是盒子模型的默认行为。您可以使用box-sizing属性更改它。你的情况：

.field { 
    ... 
    box-sizing: border-box; 
} 

http://jsfiddle.net/aLz6b/3/

延伸阅读：http://css-tricks.com/box-sizing/

Answer 2

的width: 100%属性适用于内容框，而不是边界框。如果您使用的是CSS3，则可以设置box-sizing: border-box以获得预期的大小。

http://www.w3.org/TR/css3-ui/#box-sizing0

Answer 3

它，因为你必须应用到.fieldpadding去除填充，看看它会奏效。

.field{display:block;width:100%;margin:10px 0;} 

OR

你有100%宽度设置成只设置宽度如下。

.field { 
    display: block; 
    margin: 10px 0; 
    padding: 10px; 
    width: 280px; 
} 

Answer 4

试试这个：

.wrap{width:300px;overflow:hidden;padding:10px 0px;}