拉伸水平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> 

这也可以