html - 在 CSS 中围绕多个单词创建一个圆圈

Question

我正在尝试围绕多个单词创建一个圆圈。现在我在每个单词周围都有一个圆圈。以下是我正在使用的代码。

HTML
<span class="numberCircle"><span>Circle</span></span>
<span class="numberCircle"><span>all</span></span>
<span class="numberCircle"><span>words</span></span>

CSS
.numberCircle {
display:inline-block;
line-height:0px;

border-radius:50%;
border:2px solid;

font-size:32px;
}

.numberCircle span {
display:inline-block;

padding-top:50%;
padding-bottom:50%;

margin-left:8px;
margin-right:8px;
}

Answer 1

您创建了两个带有“span”的不同标签，请尝试删除没有类的标签，然后重试。有两个标签，一个有类别，一个没有类别是多余的。此外，CSS 是多余的，因为它指的是影响相同标记的两个标签。通过创建单个标签来解决这个问题:

<span class="class"> words </span>

将 CSS 添加到此标记并重试。

要将所有单词添加到此类中，请使用:

<span class="class"> <div> word 1</div>  <div> word 2</div> <div> word 3</div></span>

这也将使所有 div 具有 CSS 样式表使用的相同类