向水平滚动容器的第一个和最后一个元素添加边距

Question

我正在尝试创建一个水平滚动容器。每件事都工作正常，但我似乎无法在容器的最后一个元素上引起空白，

这是笔，

https://codepen.io/mercurial_providence/pen/ZEEeGqR

<div class="container">
  <div class="content full-width">
    <div class="item">ITEM</div>
     ...
    <div class="item">ITEM</div>

  </div>
</div>

和CSS，

.container{
  width:80%;
  margin-left:9%;
  background:blue;
  height:200px;
  position:absolute;
  .content{
    display:flex;
    flex-direction:row;
    overflow:auto;
  }
  .full-width {
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      max-width: 100vw;
      position: relative;
      right: 50%;
      width: 100vw;
      > :first-child{
        margin-left: 5vw;
      }
      > :last-child{
        margin-right: 300vw;
      }
    }
}

.item{
  min-height:92px;
  min-width:92px;
  background:cyan;
  margin:4px;
}

Answer 1

您可以使用此代码

body {
  margin: 0px;
}

.container {
  width: 80%;
  margin-left: 9%;
  background: blue;
  height: 200px;
  position: absolute;
}

.container .content {
  display: flex;
  flex-direction: row;
  overflow: auto;
}

.container .full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

.item:first-child {
  margin-left: 7vw;
}

.item:last-child {
  margin-right: 300vw;
}

.item {
  min-height: 92px;
  min-width: 92px;
  background: cyan;
  margin: 4px;
  padding: 5px;
}

<div class="container">
  <div class="content full-width">
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
  </div>
</div>

Answer 2

您的保证金适用于最后一个孩子的计算问题。如果您在DOM中看到的是最后一个孩子，则右边距为300vw。没有jQuery，就不可能计算出每个项目的宽度并将其放在父元素上。

var cal_width = 0;
jQuery('.full-width .item').each(function($){
  var o_width = jQuery(this).outerWidth(true);
  cal_width = cal_width + o_width;
});
jQuery('.full-width').css('width', cal_width);

body{overflow-x: hidden;}
.container{
  width:80%;
  margin-left:9%;
  background:blue;
  height:200px;
  position:relative;
  }
  .content{
    display:flex;
    flex-direction:row;
  }
  .scroll{
    position: relative;
    margin: 0 -20%;
    padding: 0 20%;
    overflow: auto;
  }
  .full-width {
      position: relative;
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      right: 50%;
      }
       .full-width > .item:first-child{
        margin-left: 5vw;
      }
        .full-width > .item:last-child{
        margin-right: 10vw;
      }
    


.item{
  min-height:92px;
  min-width:92px;
  background:cyan;
  margin:4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="scroll">
  <div class="content full-width">
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    <div class="item">ITEM</div>
    
  </div>
  </div>
</div>