拉伸水平div（中間div拉伸）

Question

我想創建一個標題，頁面寬度與靜態。

我的標題由三部分組成，兩邊寬度固定，中間伸展。

<div class="bigBlueBox"> 
    <div class="headerBox"> 
     <div class="leftSide"></div> 
     <div class="middleSide"></div> 
     <div class="rightSide"></div> 
    </div> 
</div> 

我用display: box和box-flex: 1爲中間箱的拉伸。

body { 
    margin: 0; 
    padding: 0; 
} 
.bigBlueBox { 
    height: 45px; 
    width: 100%; 
    background-color: blue; 
} 
.headerBox { 
    border: 1px solid red; 
    color: #FFFFFF; 
    display: -moz-box; 
    font-weight: bold; 
    height: 45px; 
    margin: auto; 
    width: 100%; 
} 
.leftSide { 
    border: 1px solid yellow; 
    display: inline-block; 
    float: left; 
    height: 45px; 
    width: 20px; 
} 
.middleSide { 
    -moz-box-flex: 1; 
    display: inline-block; 
    float: left; 
    height: 45px; 
} 
.rightSide { 
    border: 1px solid green; 
    display: inline-block; 
    float: left; 
    height: 45px; 
    width: 20px; 
} 

我的問題是，你可以在這個fiddle看到，有一個保證金我無法擺脫的（紅色邊框不是周圍的藍色框）。

我怎樣才能去掉這個 「緣」？

否則，還有沒有使用盒子的方法嗎？

Answer 1

好解決方案很簡單，我只是不得不添加中間的div裏面的一些內容：

<div class="bigBlueBox"> 
    <div class="headerBox"> 
     <div class="leftSide"></div> 
     <div class="middleSide"> SOMETHING </div> 
     <div class="rightSide"></div> 
    </div> 
</div> 

這也可以