javascript - 内联块位置不符合预期(CSS)

为了找点乐子，我决定今天做一个滑动架子。我开始寻找并按照自己的意愿进行工作，然后决定在卡中放入一些内容。

我在第一张卡片上添加了文字，然后几乎向下移动到了新行。我无法解释为什么会这样（尽管我敢肯定有一个简单的解释）。可以告诉我我所缺少的吗？

谢谢🙂

function hideTrigger() {
  leftTrig.removeAttribute("hidden");
  rightTrig.removeAttribute("hidden");
  switch (pos) {
    case 0:
      leftTrig.setAttribute("hidden", "");
      break;
    case posMax:
      rightTrig.setAttribute("hidden", "")
  }
}

function moveHelper() {
  boxesCont.style.transform = slideHelper(), hideTrigger(), setTimeout(function() {
    end = boxCont[posMax].getBoundingClientRect().left <= window.innerWidth ? 1 : 0
  }, 300)
}

function slideHelper() {
  return "translate(-" + boxSize * pos + "px)"
}

function moveRight() {
  pos < posMax && (end ? endHelper() : (pos++, moveHelper()))
}

function moveLeft() {
  pos > 0 && (pos--, moveHelper())
}

function moveTo(e) {
  e >= 0 && e <= posMax && (pos = e, moveHelper())
}

function endHelper() {
  pos++;
  let edgeDif = boxSize - boxMargin - (window.innerWidth - boxCont[posMax].getBoundingClientRect().left);
  rightTrig.setAttribute("hidden", ""), boxesCont.style.transform = "translate(-" + (boxSize * (pos - 1) + edgeDif) + "px)"
}

var leftTrig = document.querySelector(".directional.left");
var rightTrig = document.querySelector(".directional.right");
var boxesCont = document.querySelector(".shelf .boxes");
var boxCont = boxesCont.querySelectorAll(".box");
var boxStyle = boxCont[0].currentStyle || window.getComputedStyle(boxCont[0]);
var boxMargin = parseFloat(boxStyle.marginLeft);
var boxSize = boxCont[0].offsetWidth + 2 * boxMargin;
var end = 0;
var pos = 0;
var posMax = boxCont.length - 1;

leftTrig.addEventListener("click", function() {
  moveLeft()
});
rightTrig.addEventListener("click", function() {
  moveRight()
});

moveHelper();

body {
  margin: 0;
  font-family: Roboto;
  text-align: justify;
}

.shelf {
  position: relative;
  overflow-x: hidden;
  font-size: 0;
}

.shelf button.directional {
  position: absolute;
  transition: opacity 0.3s cubic-bezier(.25, .8, .25, 1);
  height: 100%;
  width: 30px;
  top: 0;
  opacity: 0;
  border: 0;
  border-radius: 0;
  background: rgba(55, 71, 79, 0.4);
  color: #F5F5F5;
  cursor: pointer;
  z-index: 9999;
}

.shelf button.directional.left {
  left: 0;
}

.shelf button.directional.right {
  right: 0;
}

.boxes {
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}

.box {
  display: inline-block;
  border-radius: 2px;
  height: 200px;
  width: 350px;
  margin: 0 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  font-size: 16px;
}

.box:nth-child(even) {
  background: #f44336;
}

.box:nth-child(odd) {
  background: #2196F3;
}

.shelf:hover button.directional {
  opacity: 1;
}

.shelf:hover button.directional:hover {
  background: rgba(55, 71, 79, 0.8);
}

*[hidden] {
  display: none;
}

<div class="shelf">
  <button class="directional left">&lsaquo;</button>
  <div class="boxes">
    <div class="box">test</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <button class="directional right">&rsaquo;</button>
</div>

链接到JSFiddle

最佳答案

将vertical-align: top;添加到.box。

这将使您的内联块元素在其最高点垂直对齐。