html - 拉伸水平 div（中间 div 拉伸）

Question

我想创建一个与页面宽度一致的标题。

我的标题由三个部分组成，两个固定宽度的侧面和伸展的中间。

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

我使用display: boxandbox-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;
}

我的问题是，正如您在这个小提琴中看到的那样，有一个我无法摆脱的边距（红色边框不在蓝色框周围）。

我怎样才能删除这个“边距”？

否则，是否有另一种方法可以在不使用盒子的情况下做到这一点？

Answer 1

那么解决方案很简单，我只需要在中间的 div 中添加一些内容：

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

这也可能是