【问题标题】：How to apply right margin/padding to this horizontal scrolling element? [duplicate]如何将右边距/填充应用于此水平滚动元素？ [复制]
【发布时间】：2019-06-17 18:53:58
【问题描述】：

我有一个水平滚动的 div，它的左右填充为 100 像素。左侧填充似乎工作正常。但是，右侧是不可见的。更何况最后一节的50px右边距也不见了。

我错过了什么？为什么右边的 padding 和 margin 都不被尊重？

body {
  margin: 0;
}

div {
  width: 100vw;
  display: flex;
  overflow: auto;
  padding: 0 100px;
  box-sizing: border-box;
}

section {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

更新

根据@chaitanya swami 的建议，以下是一种解决方法。我仍然想知道为什么上述方法没有按预期工作。

body {
  margin: 0;
}

#wrapper {
  width: 100vw;
  overflow: auto;
}


#carousel {
  display: flex;
  padding: 0 100px;
  width: calc(100vw + 400px);
}

.slide {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div id="wrapper">
  <div id="carousel">
    <section class="slide"></section>
    <section class="slide"></section>
    <section class="slide"></section>
  </div>
</div>

【问题讨论】：

您在评论中所说的意思是说您不希望主 div 的右侧填充，否则块应该位于中心。

标签： html css flexbox

【解决方案1】：

为此，您需要一个父 div。您需要定义父 div 的宽度，当前为 100vw。您可以通过设置宽度 900px 或任何总宽度来实现您想要的。希望对您有所帮助。

【讨论】：

谢谢，这很有帮助。我仍然想知道为什么没有应用正确的填充和最后一个右边距。
@RaphaelRafatpanah 可能与 display flex 有关。

【解决方案2】：

如果不添加一些额外的孩子，您的选择就会受到限制。

首先是一个不包含额外HTML 子级的解决方案。

从父级中删除 flex。
从父级移除外部padding 规则。
将white-space: nowrap 添加到父级。
制作儿童版块inline-block。
为了处理不需要的间隙空间（inline-block 的症状），将父级的font-size 设置为0，在子元素中将其恢复为基本字体大小
分别为第一个/最后一个孩子添加100px 的左/右边距。

为了让 CSS 更有条理，我采取的一个步骤是将 100px 外部间距分配给原生 CSS 变量，因为该值用于多个地方。我认为这有助于使代码更具可读性。

:root {
  --outer-spacing: 100px;
}

body {
  margin: 0;
}

div {
  width: 100vw;
  overflow: auto;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0;           /* Prevent unwanted inline-block gap spacing */
}

section {
  font-size: 16px;        /* Restore base font size */
  width: 300px;
  margin: 0 15px;
  height: 300px;
  max-height: 100vh;
  background: red;
  display: inline-block;
}

section:first-of-type {
  margin-left: var(--outer-spacing);
}

section:last-of-type {
  margin-right: var(--outer-spacing);
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

http://jsfiddle.net/oxdbpq62/3/

最后，是一个更简单的解决方案，但在原始子项前后添加了span。注意：我删除了显式宽度并将它们添加到 flex-basis 插槽中的每个速记 flex 声明中。

body {
  margin: 0;
}

div {
  width: 100vw;
  display: flex;
  overflow: auto;
  box-sizing: border-box;
}

.gutter {
  flex: 0 0 100px;
}

section {
  flex: 0 0 300px;
  max-height: 100vh;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div>
  <span class="gutter"></span>
  <section></section>
  <section></section>
  <section></section>
  <span class="gutter"></span>
</div>

http://jsfiddle.net/jw0qz2t3/

【讨论】：

【解决方案3】：

你也可以像这样使用css

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

<style>
 body {
  margin: 0;
}

div {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow: auto;
  padding: 0 100px;
  box-sizing: border-box;
}

section {
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}
</style>

【讨论】：