Html 移动列表项问题

问题是，如果我在product div或slider div中的任何元素上添加任何边距，那么整个列表项都会向下移动

.产品滑块{ 边缘顶部：16px； 文本对齐：居中； } .幻灯片项目{ 列表样式类型：无； 显示：内联； 宽度：80%； 溢出：隐藏； 保证金：自动； } .product、.slider{ 高度：200px； 边框：1px纯黑； 显示：内联块； } .产品{ 宽度：25%； } .滑块{ 宽度：5%； } 测验 测验 测验 试试这个：

.产品滑块{ 边缘顶部：16px； 文本对齐：居中； } .幻灯片项目{ 列表样式类型：无； 显示：内联； 宽度：80%； 溢出：隐藏； 保证金：自动； } .product、.slider{ 高度：200px； 边框：1px纯黑； 显示：内联块； } .产品{ 宽度：25%； } .滑块{ 宽度：5%； } 测验 测验 测验 还可以尝试以下方法：

.product-slider{
      margin-top: 16px;
      text-align: center;
    }

    .slide-item{
      list-style-type: none;
      display: inline;
      width: 80%;
      overflow: hidden;
      margin: auto;
    }

    .product, .slider{
      height: 200px;
      border: 1px solid black;
      display: inline-block;
      vertical-align:text-top;
    }

    .product{
      width: 25%;
    }

    .slider{
      width: 5%;
    }

<ul class="product-slider">
  <li class="slide-item">
    <div class="slider"><i class="fas fa-angle-left"></i></div>
  </li>
  <li class="slide-item">
    <div class="product">Test</div>
  </li>
  <li class="slide-item">
    <div class="product">Test</div>
  </li>
  <li class="slide-item">
    <div class="product">Test</div>
  </li>
  <li class="slide-item">
    <div class="slider"><i class="fas fa-angle-right"></i></div>
  </li>
</ul>

---

试着用填充代替Marginga你在fiddle/snippet中显示了你的问题吗？我已经试过填充输出了。请从正确描述你在这里想要实现的目标开始。请去读。