javascript - 子 div 对齐父 div 的中心并溢出？

Question

你好 Stackoverflow 团队，

溢出的父div中的子div如何具有左右边距？我正在尝试解决这个问题，但它没有为它提供一个干净的解决方案。

尝试:

margin-right 不起作用

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

由于您正在为 child 使用 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>