爲什麼孩子輸入字段比父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;}