内联块元素的 CSS 宽度问题

Question

在这个小提琴示例中，https://jsfiddle.net/atmgtm/jjurk9jv/ 我试图创建一个 carousal ，左右两边都有箭头（垂直居中）。 轮播的总宽度为 300px。 我垂直居中箭头的方式是使用问题How to vertically align an image inside div 中提到的想法。 我已经成功地将两个箭头居中，但是在水平放置箭头时遇到了一些意想不到的（我缺乏理解）问题。

当我将箭头块的宽度从 296 更改为 297 时，它会呈现在下面。这让我感到困惑，因为箭头块的宽度小于 300 并且应该在轮播中呈现。

    /* line 19, ../scss/carousal.scss */
    .carousal .arrow-block {
      display: inline-block;
      vertical-align: middle;
      height: 30px;
      width: 296px;
    }

我注意到，当箭头块在轮播内部渲染时（当宽度小于 296 像素时），即使我没有添加填充或边距，轮播的左边框和箭头块之间也有一些空间.

Answer 1

请看下面的代码，希望对你有帮助。

/* line 14, ../scss/carousal.scss */
.carousal {
  width: 300px;
  height: 300px;
  background: #ccc;
  box-sizing: content-box;
  z-index: -1;
}
/* line 20, ../scss/carousal.scss */
.carousal .inline-block {
  height: 100%;
    display: table;
    vertical-align: middle;
}
/* line 21, ../scss/carousal.scss */
.carousal .arrow-block {
  display: table-cell;
    vertical-align: middle;
    height: 20px;
    width: 300px;
}
/* line 28, ../scss/carousal.scss */
.carousal .arrow {
      
}
/* line 29, ../scss/carousal.scss */
.carousal .clear {
  float: none;
}
/* line 30, ../scss/carousal.scss */
.carousal .left {
  float: left;
}
/* line 31, ../scss/carousal.scss */
.carousal .right {
  float: right;
}

/* line 2, ../scss/main.scss */
body {
  width: 90%;
  margin: auto;
}

    <div class="carousal">
        <div class="inline-block">
          <div class="arrow-block">
              <div class="arrow left"> < </div>
              <div class="arrow right"> > </div>
          </div>
        </div>
    </div>