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

我试图在多个单词周围画一个圆圈。现在我在每个单词周围画了一个圈。下面是我正在使用的代码

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

HTML
圆圈
全部的
话
CSS
.数字圆圈{
显示：内联块；
线高：0px；
边界半径：50%；
边框：2倍实心；
字体大小：32px；
}
.编号圆形跨度{
显示：内联块；
垫面：50%；
垫底：50%；
左边距：8px；
右边距：8px；
}

您已经创建了两个带有“span”的不同标记，请尝试删除不带类的标记，然后重试。有两个标记，一个带类，一个不带类是多余的。CSS也是多余的，因为它引用了影响相同标记的两个标记。通过创建单个标记来Dix：

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

单词

将CSS添加到此标记，然后重试

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

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

单词1单词2单词3

---

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

将所有要循环的单词放在一个DIV内，该DIV具有类号rcle

 <div class="numberCircle">
    <div>CIrcle</div>
    <div>all</div>
    <div>words</div>
 </div>

圆圈
全部的
话

好吧，您可以通过使用元素包装文本并在该元素中使用

.numberrcle

类来轻松实现

HTML

<div class="numberCircle">
    <span>Circle</span>
    <span>all</span>
    <span>djsfkhjdajh</span>
</div>

你可以在这里看到一个例子

---

为什么不将所有单词放在一个范围内？这是最简单的解决方案。将“显示”更改为“块”也会很有帮助。由于布局应使用

，而样式应使用

text@ub3rst4r谁说的？还有很多其他的

标签

可以用来设置文本样式、

strong

、

em

、

b

，等等。。。如果您愿意，甚至可以使用

div

。虽然我同意我不会更改

span

元素周围的标记，但这是您所说的后一部分，我不同意。@Shomz我完全支持语义标记，但建议

span

是设置文本内容样式的唯一适用标记是不正确的。就像我说的，有各种各样的标记可以保持标记的语义-如果它掉了，我会道歉argumentative@justinw没问题，我只是说，尽管可能不准确，

span

在这里比

div

更合适，我理解他为什么否决了这一点。@ub3rst4r这不公平，如果你不能上课。通常会将css类分配给。没有正当理由否决投票。请撤回或给出一个有充分理由的理由来否决投票。

.numberCircle {
    display: inline-block;
    line-height: 0px;
    border-radius: 50%;
    border: 2px solid;
    padding: 20px; /* Add spacing in the edges */
    font-size: 32px;
}

.numberCircle span {
    display: inline-block;
    padding: 50% 0; 
    /* I dont think the margins are necessary in this way */
}