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