html - 如何将右侧填充添加到水平滚动？

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
Add padding-right to last child element using element:last-child (Example below)

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