无法在带有滚动条的div中给最后一个元素设置右边距？

Question

我有一个包含一些子div的div，我将其用作选项卡，并且我的父div具有水平滚动条（我在移动视图中使用它，以便宽度更小）。就像这样：

.parent {
  display: flex;
  overflow-x: auto;
  padding: 15px 0 20px;
}

.tab {
  font-size: 15px;
  text-transform: uppercase;
  padding: 10px 40px;
  color: #a4b5bf;
  white-space: nowrap;
}

<div class="parent">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab">Tab 4</div>
</div>

问题在于，当我想在最后一个元素上设置右边距时，它就不会从div的末尾移动。你可以在检查器中看到它获得了边距，但它就是不动。

- Nemanja G

---

有 CSS 弹性属性，尝试使用它们来修复。类似于 "flex: 0 0 auto;"。 - Vinod Kumar

你的意思是什么？因为当我查看检查器时，最后一个元素上没有边距。只有填充，而且所有元素都有填充？ - Dev Bunker

现在没有边距，我有一个 JavaScript 函数可以给第一个和最后一个元素设置左/右边距（虽然我必须这样做，但它确实有效），并且它将第一个元素从左侧移动，但是最后一个元素仍然停留在右侧，即使有右边距。@DevBunker - Nemanja G

也许你应该更新你问题中的代码以反映出JS应用额外规则后的布局结果，这样我们才能真正地重现这个问题。 - domsson

@domsson 根据屏幕大小减去选项卡的宽度，只是提供了 margin-left 和 margin-right，这没什么奇怪的。 - Nemanja G

Answer 1

在父元素上使用display:flex;会防止子元素的margin生效。若想达到您的要求，可以使用透明边框：

    .tab:last-child {
        border-right: 30px solid transparent;
    }

- kastriotcunaku

---

这样做可以完成工作，但如果我想为选项卡添加一些背景，它只会将其视为填充，我的选项卡就会变得更宽。 - Nemanja G

@grabnem - 如果您的父元素有坚实的背景颜色，您可以用边框颜色覆盖它，例如 border-right: 30px solid #ffff; // 适用于白色父元素背景。 - kastriotcunaku

Answer 2

我知道这是一个旧问题，但最近我遇到了类似的问题，我的解决方法是在父容器上使用::before或::after，具体取决于您是希望第一个元素还是最后一个元素（在这种情况下）具有margin-right或padding-right。

    .parent::after {
      content: '';
      border-left: 20px solid transparent; 
    }

Codepen

---

.parent {
  display: flex;
  overflow-x: auto;
  padding: 15px 0 20px;
  /*extra code for example purpose*/
  background: aquamarine;
  width: 450px;
}

.tab {
  font-size: 15px;
  text-transform: uppercase;
  padding: 10px 40px;
  color: #a4b5bf;
  white-space: nowrap;
  /*extra code for example purpose*/
  background-color: teal;
}


/** 
Having the before and after pseudo element in parent to mimic adding margin/padding to the first and last child element 

NOTE: There's a possibility that sometimes border-left doesn't work and border works, which in this case, the border width should be half to accomodate the left and right border
**/

.parent::before,
.parent::after {
  content: '';
  border-left: 20px solid transparent;
}

<div class="parent">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab">Tab 4</div>
</div>

- Omar Tan

---

请注意，您不能使用此技术来计算CSS宽度 :( https://dev59.com/VWAg5IYBdhLWcg3wu87o - xaunlopez

为了在子项已经有边框的情况下使用，点赞此内容。 - codycustard