css - 在左侧而不是右侧创建一个隐藏的溢出

Question

我想创建一个轮播。

问题是 overflow 在右边，而我想在左边；我尝试了 right:0 但似乎不起作用；

.row { 
width:300px;
}

.carousel { 
max-width: 100%;
position: relative;
white-space: nowrap;
  border: 1px solid red;
}
.container{
  position: relative;
  // overflow: hidden;
  //right:0;
}

.items {
display: block;
left: 0;
position: relative;
top: 0;

}

<div class="row">
<div class="carousel">
  <div class="container">
    <div class="items">
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
     </div>
    </div>
 </div
</div>

Answer 1

改变方向为rtl

.row {
  width: 300px;
}

.carousel {
  max-width: 100%;
  white-space: nowrap;
  border: 1px solid red;
}

.items {
  direction:rtl;
}

<div class="row">
  <div class="carousel">
    <div class="container">
      <div class="items">
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
      </div>
    </div>
  </div>
</div>