Question

我正在尝试在水平滚动条中添加右侧填充，以确保滚动条中的最后一项进入屏幕中心。

以下是我正在尝试的！尽管左填充效果很好，但我不明白为什么未应用右填充

.option-widget {
 display: flex !important;
 overflow: auto;
  padding-left: 40% !important;
  padding-right: 40% !important;
}

HTML：

<div className="option-widget">
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
</div>

任何帮助将不胜感激。

Answer 1

TL; DR
使用padding-right将element:last-child添加到最后一个子元素（下面的示例）

.option-widget {
  display: flex !important;
  overflow: auto;
}

.icon-font {
   margin: 0 1rem; 
}

.icon-font:last-child {
  padding-right: 50%;
}

<div class="option-widget">
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
</div>

我认为您正在使用某种框架来动态添加图像，因此我创建了一个简单的示例，使用纯html。

我将padding-right添加为50%是因为50%是全宽度的一半/中心，总宽度为100%。 >

如何在水平滚动中添加右侧填充？

1 个答案: