Question

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

.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和{{1} }）：

height

有关工作示例，请参阅this JSFiddle。

Answer 2

首先，同一个班级的多重声明几乎让我疯狂lol j / k我重新做了你的HTML并包括你的CSS。

DEMO

在css和html中对齐文本和圆圈

2 个答案: