html - 在相对定位元素(无 flex 盒)之前/之后对齐移动方向元素(上一个/下一个)

Question

我正在处理多元素轮播，我需要对齐 2 个元素，前一个，下一个 - 之前，之后是相对位置的容器；

我需要:

• Previous 在 items 之前中间垂直对齐
• 在 items 之后居中垂直对齐
• 对于Next,Previous我想最后用一个图标字体

items 使用javascript会左右移动，所以他需要相对定位

我尝试在元素上使用 display:inline-block，但没有按预期工作； !对于 item-container 类，可以使用 float 代替 display: inline-block。 我不能使用 flexbox，因为我需要支持旧版浏览器。

.carousel {
  width: 500px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.c-carousel__previous,
.c-carousel__next {
  display: inline-block;
}

.items {
  top: 0px;
  left: 0;
  position: relative;
  display: inline-block;
}

.item-container {
  width: 16.66667%;
  display: inline-block;
}

<div class="carousel">
  <div class="previous">
    previous
  </div>
  <div class="items">
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
  </div>
  <div class="next">
    next
  </div>
</div>

Answer 1

试试这个

.carousel {
  width: 500px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.previous,
.next {
  display: inline-block;
  vertical-align: middle;
  width: 25px;
}

.items {
  top: 0px;
  left: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;  
  width: 450px;
  overflow: hidden;
}

.item-container {
  width: 16.66667%;
  display: inline-block;
}

<div class="carousel">
  <div class="previous">
    previous
  </div>
  <div class="items">
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
  </div>
  <div class="next">
    next
  </div>
</div>

请相应地调整宽度。