Html 在跨距字体图标上画一个圆圈

我有一个简短的问题

我正在做一个关于笑脸表情的反馈调查，如下图所示。 我使用的字体在脸的圆圈上没有一个圆圈，所以我只是试着画它

我的问题是，圆圈宽度从未设置，因此笑脸总是具有不同的面宽度：

我的代码：

 .rating-item{

    border-width:3px;
    border-color:black;
    font-size:150%;
    font-style:bold;

}

.rating-item span{

    border-width: 2px;
    padding:5.5px;
    width:30px;
    border-style: solid;
    border-radius: 50%;
}



    <div class="article-survey-container ">
<div class="article-survey ">

    <div class="selected-text"></div>
    <div class="recorded-message"></div>
    <ul class="ratings">
        <li data-rating="5" class="rating-item" id="muy-dificil-rating"> <span class="fontelico-emo-unhappy "> </span></li>
        <li data-rating="4" class="rating-item" id="dificil-rating">   <span class="fontelico-emo-displeased"> </span></li>
        <li data-rating="3"  class="rating-item"id="normal-rating">   <span class="fontelico-emo-sleep"> </span></li>
        <li data-rating="2"  class="rating-item"id="facil-rating">  <span class="fontelico-emo-happy"> </span></li>
        <li data-rating="1" class="rating-item" id="muy-facil-rating">  <span class="fontelico-emo-grin"> </span></span></li>



    </ul>

    <br>


    <input type="hidden" name="dificultad" id="dificultad" value="">
</div>
</div>
</div>

。评级项目{
边框宽度：3倍；
边框颜色：黑色；
字体大小：150%；
字体风格：粗体；
}
.评级项目范围{
边框宽度：2倍；
填充物：5.5px；
宽度：30px；
边框样式：实心；
边界半径：50%；
}

有Css/Hml的想法吗？

试试这样：

.rating-item {
    border-width:3px;
    border-color:black;
    font-size:150%;
    font-style:bold;
}
.rating-item span {
    border-width: 2px;
    padding:5.5px;
    width:30px;
    height:30px;
    border-style: solid;
    border-radius: 50%;
    display:block;
    float:left;
    margin:10px;
}


li{

    list-style-type:none;
}

---

您需要将

span

元素设置为

display:inline block

或

display:block

，否则默认情况下它们将设置为

display:inline

，这意味着将忽略

宽度

声明

。评分项目span{
...
显示：内联块；
}

---

演示

span{
背景：#f00；
颜色：#fff；
高度：30px；
线高：30px；
文本对齐：居中；
宽度：30px；
}
内联块跨度{
显示：块；
}
ul.no-inline-block跨距{
显示：内联；
}
保险商实验室{
列表样式类型：无；
}
李{
显示：内联块；
}

带块或内联块


1.


2.


3.


无块或内联块


1.


2.


3.

您必须使显示：块并设置宽度和高度：

.rating-item span {
    border-width: 2px;
    padding:5.5px;
    width:30px;
    height:30px;
    border-style: solid;
    border-radius: 50%;
    **display:block;**
    float:left;
    margin:10px;
}


li{

    list-style-type:none;
}

---

您可以通过svgy创建它您的标记错误您应该在关闭span标记后关闭中心标记，也就是删除了中心标记，这只是我最后一次快速尝试，如果不尝试将

display:inline block

添加到

。评级项目span

，问题也是一样的。跨距是内联图元，因此不能在其上设置宽度