Css 子元素扩展到容器元素之后

我只想让第二个框中的按钮显示为块元素，以便它展开以填充容器——但当我将按钮元素设置为display:block时，它会溢出容器（父对象），请参见以下内容：

有什么想法吗？我错过了什么

我的CSS：

a:link { color:#0040FF;text-decoration:none; }
a:visited { color:#0040FF; }
a:hover { background-color:#82B6EA;color:#FFFFFF;text-decoration:none; }
a:active { color:#0040FF; }

body { color:black;font-style:normal;font-size:10pt;font-family:Arial, Helvetica, sans-serif;padding:0;margin:0; }

.body_1 { margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px; }

.grid_1 { margin:8px 0 0 0;padding:0;overflow:hidden; }
.grid_1_left { float:left;width:240px;margin:0;padding:0; }
.grid_1_right { margin:0 0 0 245px;padding:0 0 0 8px; }
.grid_1_right_bld { margin:0 0 0 245px;padding:0 0 0 8px;border-left:2px #AAAAAA dotted; }

.btn, a.btn
{
background-color:#D3D7D7;color:#333333;display:inline-block;padding:6px 12px;margin-bottom:0;text-align:center;white-space:nowrap;vertical-align:middle;
cursor:pointer;border:1px solid transparent;border-color:#D3D7D7;
-webkit-transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
-moz-transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
}
.btn:hover,
.btn:focus,
.btn:active { background-color:#AEB1B1;color:#333333;border-color:#AEB1B1;text-decoration:none;outline:0; }

.btn_success, a.btn_success { color:#FFFFFF;border-color:#64b92a;background-color:#64b92a; }
.btn_success:hover,
.btn_success:focus,
.btn_success:active { color:#FFFFFF;border-color: #50a118;background-color:#50a118; }

.btn_lg { padding:8px 14px;font-size:12pt; }

.btn_block { display:block;margin:0;padding:0;width:100%; }

.box_1 { border:1px solid #5C6666;margin:0; }
.box_1_body { background-color:#FFFFFF;border-top:1px solid #5C6666;margin:0;padding:6px; }
.box_1_title { background-color:#5C6666;color:#FFFFFF;margin:0;padding:6px;text-align:center; }

我的HTML

    <div class="body_1">
     <div class="grid_1">
      <div class="grid_1_left">

        <div class="box_1">
        <div class="box_1_title">Box 1</div>
        <div class="box_1_body">
         <a href="#" class="btn btn_success">Stays in the Box</a>
        </div>
       </div>
       <br>
       <div class="box_1">
        <div class="box_1_title">Box 2</div>
        <div class="box_1_body">
         <a href="#" class="btn btn_success btn_block">Does NOT stay in the Box</a>
        </div>
       </div>

      </div>

      <div class="grid_1_right">
        main body content
<br>
          <a href="#" class="btn btn_success">Btn 1</a> 
<a href="#" class="btn btn_success">Btn 2</a>
<br><br>
Note how the buttons can align without being stacked (ie: inline-block) must remain in .btn selector class
      </div>

     </div>

    </div>

方框1


方框2
主体内容





注意按钮如何在不堆叠的情况下对齐（即：内联块）必须保留在.btn选择器类中

这是因为您正在将

.btn

上的宽度设置为100%，并且您还有填充，这将在100%宽度的顶部添加填充。这将使块溢出父元素

您需要的是（

display:inline block；

已更改为

display:block；

）：

然后从

.btn\u块

编辑

下面是一个更新的JSFIDLE

问题已解决

添加了以下内容以获得更高的CSS特异性，所有内容现在都正常工作

.btn_block, a.btn_block { display:block;width:100%;padding-right:0;padding-left:0; }

---

请参阅更新的JSFIDLE:

这都是关于

框大小调整的

CSS属性。对我来说，新标准似乎违反直觉。Bootstrap和其他框架会将所有内容设置为

{box size:border box；}

，但是当您使用自己的CSS时，现在的默认设置是

{box size:content box；}

要么清楚地处理你的填充物和边框，要么干脆把它放在地板上

{box-sizing:border-box;}

---

在CSS顶部，然后框将“起作用”。

Mike——这确实起作用，但.btn选择器是从bootstrap复制的。CSS和内联块是必需的，这样按钮可以彼此相邻放置，而不是堆叠在一起——请参见我的原始问题（我将对其进行编辑以进行说明）.这应该是正确的答案。我刚刚进入了一个CSS架构，它重置了框模型，因为project使用剑道UI，因此，

边框框

不是所有元素的默认值，只有网格。我必须在这个元素链中添加.btn块才能正确显示按钮。请在发布之前将代码调整为常规布局。

{box-sizing:border-box;}