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

Question

我正在查看这个编码css星型显示，我想知道我是否可以改变恒星的总体大小？我试着把字体大小设置为15‘t，但是它会扫描星星，这样它们就不再重叠了。

​

@import "lesshat";
// Method 1) Pure CSS
.star-ratings-css {
  unicode-bidi: bidi-override;
  color: #c5c5c5;
  font-size: 25px;
  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: 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>

​

Answer 1

问题是，您只是在更改font-size。font-size和width是相互关联的。如果要设置font-size: 15px，则必须设置width: 60px，即4的倍数。

以下是代码链接：https://codepen.io/anon/pen/vRBjyG

Answer 2

只需添加span {display:内联块}，并根据需要更改..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>