CSS总是显示列表的最后一个图标被裁剪为一半答案

【问题标题】：CSS to always display last icon of list cropped to halfCSS总是显示列表的最后一个图标被裁剪为一半
【发布时间】：2021-05-28 18:32:30
【问题描述】：

我有一个图标列表，我想显示最后一个总是被裁剪的（大约是其大小的一半），以便用户知道它们还有更多。例如：

https://jsfiddle.net/1cy7kof8/91/

.icons 
{
  background: yellow;
  width: 900px; 
  height: 76px;
}

.icons img
{
  display: inline;
  margin: 4px 12px;
}

当输出窗口的大小为 526 像素然后显示 5 个半图标时工作正常，但是当我将窗口大小调整为例如 580 像素时，会显示 6 个完整的图标并且用户不知道，还有更多他们。在这种情况下，我需要将边距设置为“4px 9px”或“4px 16px”以再次显示最后一个图标的一半。

到目前为止，我唯一的解决方案是使用大量媒体查询来调整这些边距，但我觉得应该有更好的方法。 :-)

如果需要，我不介意添加更多 div，但它必须在没有任何 JavaScript 的情况下工作。

有什么想法吗？

【问题讨论】：

如果css calc()中有一个模运算符可能会有所帮助，但据我所知没有......

标签： html css icons crop

【解决方案1】：

也许是这样的......？您可以根据需要将媒体查询添加到图标包装器。这样只有您希望显示的图标可见。

.icon-wrapper {
  width: 520px;
  overflow: auto;
  transition: all ease-in-out 1s;
}
.icon-wrapper:hover {
  width: 800px;
}

.icons {
  background: yellow;
  width: 800px;
  height: 76px;
}

.icons img {
  display: inline;
  margin: 4px 12px;
}

<html>

  <div class="icon-wrapper">

    <div class="icons">

      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudio.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/cplusplus.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/fortran.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudio.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/cplusplus.svg" />
      <img height="64" width="64" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/fortran.svg" />
    </div>
  </div>

</html>

【讨论】：

我希望显示所有图标。用户可以向右滚动以查看更多内容，但我想显示最后一个，它仍然可见，因为提示在其余部分之间存在更多空间。是的，这可以通过媒体查询来完成，但我需要很多...