CSS 始终显示列表的最后一个图标裁剪为一半

问题描述

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

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

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

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

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

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

有什么想法吗？

解决方法

也许是这样的……？您可以根据需要向 icon-wrapper 添加媒体查询。这样只有您希望显示的图标可见。

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

crop html icons