Html 图像内部的响应div按钮

我有一个砖石图像画廊，我想在每张图像上放置一个带有按钮的div

我的问题是div没有响应，当我缩小屏幕时，一些按钮会消失，而不是减慢速度并跟随屏幕的移动

我打算通过减少屏幕，按钮将减少，并且仍然显示在div中

HTML

 <ul class="mdc-image-list mdc-image-list--masonry masonry-image-list second">
      <li class="mdc-image-list__item" *ngFor="let image of list; let  i = index;">
          <img [src]="image" class="mdc-image-list__image">
        <div class="mdc-image-list--with-text-protection">
          <div class="mdc-image-list__supporting">
          </div>
        </div>
      </li>
    </ul>

这里要解决的主要问题是对齐相邻的图标，而不使用

左边距

或

浮动：左边。您可以使用
display:flex和
对正内容：之间的空格
到父类（
.mdc-image-list\u label
）。这样可以确保每个项目彼此相邻显示，之间的
空间确保每个元素之间的空间相等。更多关于flexbox的信息，请访问

已更新以进行调整

.Pin{
边缘顶部：8px；
宽度：30px；
高度：30px；
光标：指针；
}
.收件箱{
宽度：30px；
高度：30px；
边缘顶部：8px；
光标：指针；
}
.聊天{
宽度：30px；
边缘顶部：10px；
高度：27px；
光标：指针；
}
.任务{
宽度：30px；
高度：30px；
光标：指针；
边缘顶部：8px；
}
//调整这个类
.mdc-image-list\u标签{
显示器：flex；
证明内容：之间的空间；
填充：0 10px；
框大小：边框框；//确保它封装了填充样式
}
每个图像的单个类都是不必要的，因此您可以删除它及其相关的css。下面的css将修复您的问题，它更通用、更好

.mdc-image-list__supporting a {
  width: 25%;
  display: inline-block;
  text-align: center;
}

.mdc-image-list__supporting a img {
   width: 25px;
   height: 25px;
   cursor: pointer;
   margin: 10px 0;
}