這可能是一個微不足道的問題，但正如你可以看到this fiddle我有一個內部和外部的div。外部div在身體上具有百分比寬度，內部div應該與外部div完全一樣寬。獲取內部div適應外部div寬度與填充
<div id="container">
<div id="content">Content</div>
</div>
問題是，內部div寬度不適應外部div的填充。我如何讓內部的股利來做到這一點？
這樣做的目的是，div應該是由輸入字段和也具有百分比寬度和填充的選擇框組成的表單的一部分。現在div應該與其他表單元素一樣寬，填充爲。
#container {
width:80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
padding: 0 10px;
margin-left:-10px;
margin-right:-10px;
}<div id="container">
<div id="content">Content</div>
</div>我刪除了左側和右側填充。
試試這個
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px 10px 0px; //changed this
}
但是我需要填充作爲80％寬度的補充 –
只要改變容器上的填充。此外，除非另有說明，塊級元素的寬度將爲100％。
http://codepen.io/anon/pen/wKwoPJ
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px;
}
#content {
border: 1px solid blue;
}
http://jsfiddle.net/mz0zt89k/2/ Nope –
從父取下左右填充，並把它添加到子元素。使用box-sizing和border-box將確保孩子的1px邊框將保留在父元素內。
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#container {
width:80%;
border: 1px solid red;
padding: 10px 0;
}
#content {
border: 1px solid blue;
padding: 0 10px;
width: 100%;
}<div id="container">
<div id="content">
Content
</div>
</div>這使得20px太小。 –
我想我誤解了你的問題。你能詳細說明你試圖達到的目標嗎？ - *問題是，內部div寬度不適應外部div的填充。*所以，你想讓子div具有與父div相同的寬度嗎？你還想爲每個邊，左邊和右邊的div div或parent div填充10px嗎？你最後一段很混亂。孩子是表格的一部分，它是否會保存輸入字段？ 20px對於什麼來說太小了？ – DavidDomain
您可以將此CSS添加到#content -
width: calc(100% + 20px);
margin-left: -10px;
全碼 -
#container {
width: 80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
width: calc(100% + 20px);
margin-left: -10px;
box-sizing: border-box;
}
#othercontent {
margin-top: 10px;
border: 1px solid green;
}<div id="container">
<div id="content">
I'm not following the padding
</div>
<div id="othercontent">
I'm following..
</div>
</div>
因此，從外層div拆下左/右填充？ – Vucko
或設置'margin：-10px;'內部div – Shehary
我不行。我需要div寬度爲80％+ 20px; –