Question

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

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

docker swarm init \
  --advertise-addr $(docker-machine ip node-1)

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

Answer 1

请仔细阅读以下代码，希望这对您有帮助。

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

内联块元素的CSS宽度问题

1 个答案: