Question

我正在查看这个codepen css star display，我想知道我是否可以改变星星的整体大小？我尝试将字体大小设置为15px，但它会使星星闪烁，以便它们不再重叠。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

这是codepen链接：https://codepen.io/anon/pen/vRBjyG

Answer 2

只需添加span {display：inline-block}并根据需要更改.star-ratings-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>

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

2 个答案: