0 
<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>

我在一个容器中有 3 个 div。我想将左按钮 div 向左推，右按钮 div 向右推，并将中间指示器 div 放在中间。问题是中间 div 需要是动态宽度，因为里面的圆形 div 的数量会根据其他变量动态变化。可能有 3 个圆圈或 5 个或 10 个圆圈。我需要中间 div 保持居中，并且还能够根据里面的圆圈 div 的数量进行扩展。

<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>
4

1 回答 1

0

我会稍微更改 CSS 以获得类似jsFiddle 示例的内容（添加了 div 边框以使它们更容易可视化）。通过给中间的指示符 div 设置一个比左右按钮 div 的宽度略大的左右边距，您可以让它在两者之间浮动并尽可能多地占用空间。

CSS：

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;
}
于 2012-05-07T17:17:58.903 回答