Question

问题是，如果我在产品div或滑块div中的任何元素上放置任何边距，则整个列表项都会向下移动。

＆＃13;

.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;
}

.product {
  width: 25%;
}

.slider {
  width: 5%;
}

＆＃13;

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

＆＃13;

Answer 1

试试这个：

＆＃13;

.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;
    }
    
    .product{
      width: 25%;
    }
    
    .slider{
      width: 5%;
    }

＆＃13;

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

＆＃13;

Answer 2

也试试这个：

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

移动列表项目问题

2 个答案: