Css 3个部门'；在具有动态宽度居中Div的容器中

我会稍微更改CSS以获得类似这样的内容（添加div边框以使其更易于可视化）。通过给中间指示器div一个比左右按钮div的宽度稍大的左右边距，可以使其在两个指示器div之间浮动，并尽可能多地占用空间

CSS:

---

示例中中间div中的圆未居中。

<style type=text/css">

 #container {
height:30px;
width:100%;
}

.left.button {
float:left;
width:60px;
}

.right.button {
float:right;
width:60px;
}

.middle.indicators {
height:30px;
}

.middle div{
display: inline-block;
margin: 10px 2px;
}

.circle {
background: rgb(102,102,102);
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
}

</style>

<div id="container">
   <div class="left button"></div>
      <div class="middle indicators">
         <div class="circle></div>
         <div class="circle></div>
         <div class="circle></div>
      </div>
   <div class="right button"></div>
</div>

div {
    border: 1px solid #999;
}

#container {
    height: 30px;
    width: 100%;
}

.left.button {
    float: left;
    width: 60px;
}

.right.button {
    float: right;
    width: 60px;
}

.middle.indicators {
    height: 30px;
    text-align:center;
}

.middle {
    margin: 0 70px;
}

.circle {
    background: #666;
    border: 1px solid #FFF;
    border-radius: 50% 50% 50% 50%;
    height: 7px;
    width: 7px;
    display: inline-block;
}