子元素不相同的寬度父

這似乎是一個簡單的問題 - 我有以下的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的值 - 爲什麼會發生？我認爲寬度應該被繼承？

來源

2012-11-21 praks5432

input是一個內聯元素（inline-block實際上）。它不會從父級繼承它的寬度，而是具有特定於瀏覽器的默認寬度。

更改CSS：

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

來源

2012-11-21 22:16:59 GolezTrol

下面是財產繼承一個的cheatsheet：http://www.communitymx.com/content/article.cfm?cid=2795d –

好了，所以我做了寬度：100％，現在輸入框比div標籤大 - 爲什麼會發生這種情況？ – praks5432

'input'元素實際上是'inline-block'。 – lanzz

這可能是因爲瀏覽器通常有自己的默認樣式（寬度，填充，保證金等），他們給予一定的DOM元素。如果要刪除所有這些默認瀏覽器樣式，則應該使用CSS重置。你也可以專門指定你想要的輸入元素的CSS。

來源

2012-11-21 22:18:41

輸入或任何表單元素不會繼承它的父級的寬度。

爲了使其與父母相同的寬度，你只需要指定它的寬度，填充和邊框來匹配它的父母。

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

來源

2012-11-21 23:08:30

子元素不相同的寬度父

回答

相關問題