子div将父div的居中对齐与溢出？

Question

您好Stackoverflow小组，

父div内溢出的子div如何有左右边距？ 我正在尝试解决该问题，但它没有给出一个干净的解决方案。

尝试：

边距右行不通

 div { border: 1px solid black; } .parent { width: 300px; height: 300px; margin: auto; position: relative; overflow: auto; } .child { width: 350px; height: 150px; top: 50px; margin-left: 20px; margin-right: 20px; position: absolute; display: inline-block; } 

 <div class="parent"> <div class="child"></div> </div> 

我不干净的解决方案：

 div { border: 1px solid black; } .parent { width: 300px; height: 300px; margin: auto; position: relative; overflow: auto; } .child { width: 350px; height: 150px; top: 50px; margin-left: 20px; border-right: 20px solid red; position: absolute; display: inline-block; } 

 <div class="parent"> <div class="child"></div> </div> 

还有解决这个问题的更好方法吗？

Answer 1

由于您使用的是孩子的position: absolute ，因此，实现所需的最佳方法是删除position: absolute然后添加所需的边距。

 div{ border: 1px solid black; } .parent { width:300px; height:300px; margin:auto; position: relative; overflow: auto; } .child { width:350px; height:150px; top: 50px; margin: 50px 20px 0; display: inline-block; } 

 <div class="parent"> <div class="child"></div> </div> 

更新资料

如果您需要将子div放在position: absolute ，则必须将其包装在另一个div中，如下所示：

 div{ border: 1px solid black; } .parent { width:300px; height:300px; margin:auto; position: relative; overflow: auto; } .child { border-color: red; position: absolute; top: 20px; height: 150px; } .sub-child { width:350px; height:150px; margin: 0 20px; display: inline-block; } 

 <div class="parent"> <div class="child"> <div class="sub-child"></div> </div> </div>