html - 在 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 * * * 布卢普 * * * 扑通 * * *

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

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 保持内联并使用 block CSS 属性(例如 margin、填充，宽度和高度):

.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;
}

参见 this JSFiddle一个工作示例。