Html 更改css中基于百分比的星级显示的总体大小

我正在看这个，我想知道我是否可以改变星星的整体大小？我试着将字体大小设置为15px，但它将星星隔开，这样它们就不再重叠了

@import“lesshat”；
//方法1）纯CSS
.星级评定{
unicode-bidi:bidi覆盖；
颜色：#C5；
字体大小：25px；
高度：25px；
宽度：100px；
保证金：0自动；
位置：相对位置；
填充：0；
文本阴影：0px 1px 0#a2a2a2；
&-顶{
颜色：#e7711b；
填充：0；
位置：绝对位置；
z指数：1；
显示：块；
排名：0；
左：0；
溢出：隐藏；
}
&-底部{
填充：0；
显示：块；
z指数：0；
}
}

★★★★★
★★★★★

只需添加span{display:inline block}并根据需要更改.star分级css的字体大小即可

@import "lesshat";
// Method 1) Pure CSS
span {
  display: inline-block;  
}
.star-ratings-css {
  unicode-bidi: bidi-override;
  color: #c5c5c5;
  font-size: 10px;
  height: 25px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  padding: 0;
  text-shadow: 0px 1px 0 #a2a2a2;
  &-top {
    color: #e7711b;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  &-bottom {
    padding: 0;
    display: inline-block;
    z-index: 0;
  }
}

<div class="star-ratings-css">
  <div class="star-ratings-css-top" style="width: 84%"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
  <div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
</div>

@import“lesshat”；
//方法1）纯CSS
跨度{
显示：内联块；
}
.星级评定{
unicode-bidi:bidi覆盖；
颜色：#C5；
字体大小：10px；
高度：25px；
宽度：100px；
保证金：0自动；
位置：相对位置；
填充：0；
文本阴影：0px 1px 0#a2a2a2；
&-顶{
颜色：#e7711b；
填充：0；
位置：绝对位置；
z指数：1；
显示：块；
排名：0；
左：0；
溢出：隐藏；
}
&-底部{
填充：0；
显示：内联块；
z指数：0；
}
}
★★★★★
★★★★★

问题在于您只更改了

字体大小<代码>字体大小

和宽度相互关联。如果要设置

字体大小：15px

，则必须设置

宽度：60px

，即4的倍数

---

这里是代码笔链接：

我在代码笔中尝试了这个，但它仍然可以看到星星。请发布代码笔示例，如果你可以将大小减小到15px会弄乱覆盖层只是好奇，如果我想使用em作为大小，那会是什么？我没有尝试，但正如我所说的

font size

和

width

是相对的，所以以1:4的比例应该可以工作