在跨度字体图标上制作一个圆圈

Question

我有一个简单的问题。

我正在用笑脸表情进行反馈调查，如下所示。 我使用的字体没有脸的圆圈，所以我只是想画它。

我的问题是圈宽从未设定，所以笑脸总是有不同的脸宽：

我的代码：

document.getElementById("times").innerHTML = (document.getElementById("times").innerHTML + "<br>I won in 7 times - the number was " + number);

任何Css / Hml想法？

Answer 1

您需要将span元素设置为display: inline-block或display: block，否则默认情况下它们将设置为display: inline，这意味着您的width .rating-item span { ... display: inline-block; } 1}}声明将被忽略。

span {
  background: #f00;
  color: #fff;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 30px;
}

ul.inline-block span {
  display: block;
}

ul.no-inline-block span {
  display: inline;
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

演示

＆＃13;

＆＃13;

<h2>With block or inline block</h2>
<ul class="inline-block">
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  <li>
    <span>3</span>
  </li>
</ul>

<h2>Without block or inline block</h2>
<ul class="no-inline-block">
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  <li>
    <span>3</span>
  </li>
</ul>

＆＃13;

<xsl:if test="translate(., '123456789', '000000000') = '00/00/0000'">
    <!-- result if valid -->
</xsl:if>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试以下操作： Demo

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

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