我有一个问题。
我正在制作一个反馈调查,使用像下面看到的笑脸表情符号。 我使用的字体没有脸部的圆圈,所以我只是尝试画它。
我的问题是,圆圈的宽度从未设置,所以笑脸的宽度总是不同:
我的代码:
.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>
有任何关于CSS/HTML的想法吗?
display:inline-block
添加到.rating-item span
。span 是内联元素,因此无法在其上设置宽度。 - Pete