Html 将5个列表项相互堆叠

我从他们那里得到了一个模板。在网站底部附近有一些盒子（那些在全球范围内送货的盒子等）

当我把它变小的时候，它们就消失了，有人知道我怎么能让它们互相叠在一起吗

这是模板：

关于这一部分：

<div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
        <ul class="wp-ads">
            <li><i class="fa fa-plane"></i><strong>Delivery worldwide</strong>See all conditions</li>
            <li><i class="fa fa-refresh"></i><strong>30 days returns</strong>For a smooth shopping</li>
            <li><i class="fa fa-phone"></i><strong>0123 456 789</strong>Contact Customer</li>
            <li><i class="fa fa-lock"></i><strong>30 days returns</strong>For a smooth shopping</li>
            <li><i class="fa fa-question-circle"></i><strong>Shopping Guide</strong>Contact Customer</li>
        </ul>
    </div>
</div> 

全球交付查看所有条件
30天退货顺利购物
0123456789联系客户
30天退货顺利购物
购物指南联系客户

查看css，如果我理解正确，您只需禁用li元素的浮动并使其显示为堆栈，对吗

查看template.css关于第1497行的内容：

.wp-ads li {
  background: #1abc9c;
  color: white;
  display: inline-block;
  float: left;
  overflow: hidden;
  padding: 20px 0 20px 25px;
  width: 20%;
}

换成

.wp-ads li {
  background: #1abc9c;
  color: white;
  /* display: inline-block; */
  /* float: left; */
  overflow: hidden;
  padding: 20px 0 20px 25px;
  width: 20%;
}

---

它消失的原因是因为它在

内部，所以当

宽度<767px

时，它的

显示
为
无
。
您应该删除类
隐藏的xs

并添加此css代码

@media (max-width: 767px){
    .wp-ads li {
         background: #1abc9c;
         color: white;
         display: block; 
         float: none;
         overflow: hidden;
         padding: 20px 0 20px 25px;
         width: 20%;
    }
}

当视图变小时，您可能需要增加
宽度

例如：

@media (max-width: 767px){
    .wp-ads li {
         background: #1abc9c;
         color: white;
         display: block; 
         float: none;
         overflow: hidden;
         padding: 20px 0 20px 5%;
         width: 90%;
    }
}

是的，这正是我想要的，但不幸的是，我没有做到。盒子变得很小，相互重叠。它们看起来只是重叠，它们直接堆叠在一起。将其更改为宽度：100%；和边缘顶部：5px；谢谢你的回答。谢谢！就这样，我会在3分钟内接受你的回答。