html – 在span字体图标上制作一个圆圈

概述我有一个快速的问题. 我正在用笑脸表情进行反馈调查,如下所示. 我正在使用的字体没有脸的圆圈,所以我只是想画它. 我的问题是圈宽从未设置,所以表情总是有不同的脸宽： 我的代码： .rating-item{ border-width:3px; border-color:black; font-size:150%; font-style:bold;}.rati 我有一个快速的问题.

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

我的问题是圈宽从未设置,所以表情总是有不同的脸宽：

我的代码：

.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 ><div >    <div ></div>    <div ></div>    <ul >        <li data-rating="5"  ID="muy-dificil-rating"> <span > </span></li>        <li data-rating="4"  ID="dificil-rating">   <span > </span></li>        <li data-rating="3"  ID="normal-rating">   <span > </span></li>        <li data-rating="2"  ID="facil-rating">  <span > </span></li>        <li data-rating="1"  ID="muy-facil-rating">  <span > </span></span></li>    </ul>    <br>    <input type="hIDden" name="dificultad" ID="dificultad" value=""></div></div></div>

任何CSS / Hml想法？

解决方法 您需要将span元素设置为：inline-block或display：block,否则默认情况下它们将设置为display：inline,这意味着您的wIDth声明将被忽略.

.rating-item span {    ...    display: inline-block;}

演示

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

<h2>With block or inline block</h2><ul >  <li>    <span>1</span>  </li>  <li>    <span>2</span>  </li>  <li>    <span>3</span>  </li></ul><h2>Without block or inline block</h2><ul >  <li>    <span>1</span>  </li>  <li>    <span>2</span>  </li>  <li>    <span>3</span>  </li></ul>

总结

以上是内存溢出为你收集整理的html – 在span字体图标上制作一个圆圈全部内容，希望文章能够帮你解决html – 在span字体图标上制作一个圆圈所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。