具有均匀间距的一条线上的多个分区

Question

我有一张带有一些图像的滑块。在这个滑块里面，我有一个名为“sb-bolas”的div，在这个div中，我创建了新的div，我有一个圆圈，在这个圆圈内我想插入一些文本。 但我需要创建超过1个圆圈，我希望每个圆圈之间都有相同的空间。

我该怎么做？

HTML

<div class="sb-bolas">
   <div class="bolas-grad">something</div>
   <div class="bolas-grad">something</div>
   <div class="bolas-grad">something</div>
</div>

CSS

.sb-bolas {
    padding: 10px;
    bottom: 50px;
    left: 100px;
    right: 100px;
    z-index: 1000;
    position: absolute;
    background: #CBBFAE;
    background: rgba(190,176,155, 0.4);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);   
    opacity: 0;
    color: #fff;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -ms-transition: all 200ms;
    transition: all 200ms;
}
.bolas-grad {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    opacity: 0.7;
    filter: alpha(opacity=40);
    background: linear-gradient(to bottom, #007EFF, #09f);
    font-size: 12px;
    color: #fff;
    line-height: 100px;
    text-align: center;
}

*的 更新 **

Image

Answer 1

使用float:left;和margin

请注意，使用 float 会删除您可能已使用其父元素建立的任何绝对定位。为了进一步帮助澄清您需要做什么，我们没有足够的上下文与 HTML 的其余部分。如果您想要更详细的答案，请提供更详细的代码。

查看此处：http://jsfiddle.net/SinisterSystems/qwA32/2/

<强> HTML：

<div class="slideshow">
    <div class="slide" style="background:#C00;">

    </div>

    <div class="slide" style="background:#0C0;">

    </div>

    <div class="slide" style="background:#00C;">

    </div>

</div>

<强> CSS：

.slideshow {
    position:absolute;
    top:0;
    left:0;
}

div.slide {
    float:left; //        <------- Here
    margin-right:50px; // <------- Here

    width: 100px;
    height: 100px;
    border-radius:50px;
    opacity:0.7;
    filter:alpha(opacity=40);
    background:linear-gradient(to bottom, #007EFF, #09f);
    font-size:12px;
    color:#fff;
    line-height:100px;
    text-align:center;
}

查看此处：http://jsfiddle.net/SinisterSystems/qwA32/2/

Answer 2

添加属性

display:inline-block;

到班级.bolas-grad，让圈子在同一行。

要为偶数空格添加margin到班级.bolas-grad