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

也可能是