在CSS和HTML中对齐文本和圆圈

Question

好的，到目前为止，我所拥有的看起来像这样：

的jsfiddle

.circleblue {
width: 1em;
height: 1em;
margin-left: 45%;
padding-top: -5%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.25, #3A547A),
    color-stop(0.60, #668EC9)
);
background: -moz-linear-gradient(
    center bottom,
    #3A547A 25%,
    #668EC9 60%
);
border: solid 2px black;
float: right;
z-index: 100;
}

HTML：

<ul>
<li>Bla<p class="circleblue"></p><p class="circleblue"><p class="circleblue"></p></li>
<li>Blup<p class="circleblue"><p class="circleblue"><p class="circleblue"></li>
<li>Blop<p class="circleblue"><p class="circleblue"><p class="circleblue"></li>
</ul>

但这根本不是我想要的。 我知道这应该很简单，但是我遇到了各种各样的麻烦。 我首先要文本，然后是代表我在该领域技能的圆圈，如下所示：

bla * * * blup * * * blop * * *

我就是找不到的简单解决方案在哪里？

Answer 1

尝试使用span而不是p作为开始：

<ul class="skills">
    <li>Bla
        <span class="blue-circle"></span>
        <span class="blue-circle"></span>
        <span class="blue-circle"></span>
    </li>
    <li>Blup
        <span class="blue-circle"></span>
        <span class="blue-circle"></span>
        <span class="blue-circle"></span>
    </li>
    <li>Blop
        <span class="blue-circle"></span>
        <span class="blue-circle"></span>
        <span class="blue-circle"></span>
    </li>
</ul>

接下来，无需float span 。 您可以使用display: inline-block来保持span内联并使用块CSS属性（例如margin ， padding ， width和height ）：

.skills {
    margin: 0;
    padding: 0;
}

.skills > li {
    display: inline-block;
    list-style: none;

    padding-right: 12px;
}

.skills > li > .blue-circle {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, #3A547A), color-stop(0.60, #668EC9));
    background: -moz-linear-gradient(center bottom, #3A547A 25%, #668EC9 60%);

    border: solid 2px black;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    display: inline-block;

    width: 1em;
    height: 1em;

    margin-left: 2px;
}

有关工作示例，请参见此JSFiddle 。

Answer 2

首先，同一类的多次声明几乎使我发疯，大声笑，我重新定义了html并包含了css。

DEMO