Question

这可能是一个微不足道的问题，但正如你在this fiddle中看到的那样，我有一个内部和一个外部div。外部div在主体上有一个百分比宽度，内部div应该与外部div一样宽。

<div id="container">
    <div id="content">Content</div>
</div>

问题是，内部div宽度不适应外部div的填充。如何让内部div执行此操作？

这样做的目的是，div应该是一个表单的一部分，该表单由输入字段和选择框组成，这些框也具有百分比宽度和填充。 div现在应该与其他表单元素 with padding 完全一样宽。

Answer 1

#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>

Answer 2

我删除了左右填充。

试试这个

#container {
    width:80%;
    border: 1px solid red;
    padding: 10px 0px 10px 0px; //changed this
}

Demo here

Answer 3

只需更改容器上的填充。此外，块级元素将达到100％宽度，除非您另行指定。

http://codepen.io/anon/pen/wKwoPJ

#container {
    width:80%;
    border: 1px solid red;
    padding: 10px 0px; 
}
#content {
    border: 1px solid blue;
}

Answer 4

从父级删除左右填充，并将其添加到子元素。将box-sizing与border-box一起使用可确保子项的1px边框保留在父元素内。

＆＃13;

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

＆＃13;

<div id="container">
  <div id="content">
    Content
  </div>
</div>

＆＃13;

Answer 5

您可以将此css添加到#content -

width: calc(100% + 20px);
margin-left: -10px;

完整代码 -

＆＃13;

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

＆＃13;

<div id="container">
  <div id="content">
    I'm not following the padding
  </div>
  <div id="othercontent">
    I'm following..
  </div>
</div>

＆＃13;

使用填充来获取内部div以适应外部div宽度

5 个答案: