内部div不包含在100％宽度的父div中

Question

我试图在父NavigationItem中包含div div。它在我的示例中不断突破父div。我知道我可以使用overflow: hidden;但是当我将该项目放在该div中时，它并没有center正确。有谁知道我做错了什么？

＆＃13;

＆＃13;

.B2_NavigationItem {
  background: #0066a2;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: left;
  padding: 6px;
  width: 100%;
}

.B2_NavigationItem2 {
  background: #0c3655;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: center;
  padding: 6px;
  width: 100%;
}

.B2_NavigationItem3 {
  background: #dcdcdc;
  display: inline-block;
  border: 0px;
  color: #000000;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  padding: 6px;
  width: 100%;
}

.B2_NavigationBubble {
  background: #FFFFFF;
  display: inline-block;
  color: #000000;
  width: 90%;
  margin: 0px 0px 4px 0px;
  border: 1px solid #000000;
  border-radius: 6px;
}

.dropdown {
  float: left;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #dcdcdc;
  width: 260px;
  border: 4px solid #0066a2;
  border-radius: 0px 0px 12px 0px;
  margin: 0px 0px 0px 0px;
  padding: 4px 0px 0px 0px;
  z-index: 999;
}

＆＃13;

<div class="dropdown">
  <div class="dropdown-content">
    <div class="B2_NavigationItem">ITEM</div>
    <div class="B2_NavigationItem">ITEM</div>
    <div class="B2_NavigationBubble">
      <div class="B2_NavigationItem2">ITEM</div>
    </div>
    <div class="B2_NavigationBubble">
      <div class="B2_NavigationItem2">ITEM</div>
    </div>
    <div class="B2_NavigationItem">ITEM</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是jsfiddle上的代码：https://jsfiddle.net/gt9udvay/

Answer 1

这是因为padding。拥有width父项100%和padding会使其宽于父容器的宽度。要解决此问题，只需将box-sizing: border-box应用于divs即可。

您可以详细了解box-sizing here。

＆＃13;

＆＃13;

.B2_NavigationItem {
  background: #0066a2;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: left;
  padding: 6px;
  width: 100%;
}

.B2_NavigationItem2 {
  background: #0c3655;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: center;
  padding: 6px;
  width: 100%;
}

.B2_NavigationItem3 {
  background: #dcdcdc;
  display: inline-block;
  border: 0px;
  color: #000000;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  padding: 6px;
  width: 100%;
}

.B2_NavigationBubble {
  background: #FFFFFF;
  display: inline-block;
  color: #000000;
  width: 90%;
  margin: 0px 0px 4px 0px;
  border: 1px solid #000000;
  border-radius: 6px;
}

.dropdown {
  float: left;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #dcdcdc;
  width: 260px;
  border: 4px solid #0066a2;
  border-radius: 0px 0px 12px 0px;
  margin: 0px 0px 0px 0px;
  padding: 4px 0px 0px 0px;
  z-index: 999;
}

.dropdown-content div {
  box-sizing: border-box; /*apply where applicable*/
}

＆＃13;

<div class="dropdown">
  <div class="dropdown-content">
    <div class="B2_NavigationItem">ITEM</div>
    <div class="B2_NavigationItem">ITEM</div>
    <div class="B2_NavigationBubble">
      <div class="B2_NavigationItem2">ITEM</div>
    </div>
    <div class="B2_NavigationBubble">
      <div class="B2_NavigationItem2">ITEM</div>
    </div>
    <div class="B2_NavigationItem">ITEM</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将左边和右边的填充更改为0px，就像......

.B2_NavigationItem2 {
  background: #0c3655;
  display: inline-block;
  color: #FFFFFF;
  font-size: 14px;
  margin: 0px 0px 4px 0px;
  text-align: center;
  padding: 6px 0px;
  width: 100%;
}