如何为水平滚动条添加右侧填充？

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>

任何形式的帮助都将不胜感激。

- Udit

---

请问您能否添加HTML代码？ - Sameer

@SameerKhan 嘿，我已经添加了HTML。 - Udit

Answer 1

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

.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％。

- Sameer