內聯塊元素的CSS寬度問題

Question

在這個小提琴示例中，https://jsfiddle.net/atmgtm/jjurk9jv/ 我試圖創建一個carousal，箭頭（垂直居中）在左右兩側。 carousal的總寬度是300px。 我將箭頭垂直居中的方式是使用問題How to vertically align an image inside div中提到的想法。 我已成功將兩個箭頭居中，但在水平放置箭頭時出現了一些意想不到的情況（我缺乏理解）。

當我將箭頭塊的寬度從296更改爲297時，它呈現在下方。這使我感到困惑，因爲箭頭塊的寬度小於300，應該呈現在carousal內。

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