只使用css宽度填充60％星号 [英] Only fill 60 percent star using css width

问题描述

当我尝试 style = width：60％到 .rating 类时，金色应填满只有3星和其余的星星应该是空白的，但它不起作用。请帮助我，我的错误是什么？

我的html代码：

 < div class =star> 
< div class =ratingstyle =width：60％> 
< span>&＃9734;< / span> 
< span>&＃9734;< / span> 
< span>&＃9734;< / span> 
< span>&＃9734;< / span> 
< span>&＃9734;< / span> 
< / div> 
< / div> 
  

我的css代码：

  .star {width：200px;位置：相对;颜色：#bdbdbd;} 
 
。尺寸范围
 {
 font-size：30px; 
 margin-left：-4px; 
 white-space：nowrap; 
 overflow：hidden; 
} 
 
。定量范围：之前{
内容：\2605; 
位置：绝对; 
颜色：金色; 
 
  

CHECK fiddle link

解决方案

这是我以前使用过的。这个效果非常好 - 你甚至可以填充一小部分星星......

https://jsfiddle.net/4qqspqxh/

  .ratings {position：relative; vertical-align：middle;显示：inline-block;颜色：＃b1b1b1; overflow：hidden;}。full-stars {position：absolute;左：0; top：0;白色空间：nowrap;溢出：隐藏;颜色：＃fde16d;}。空白星星：之前，.full-stars：之前{内容：\2605\2605\2605\2605\2605; / -webkit-text-stroke：1px＃848484;}。full-stars：before {-webkit-text-stroke：1px orange;} / * Webkit-text-stroke：笔画在Firefox或IE *上不受支持* // * Firefox * / @  -  moz-document url-prefix（）{.full-stars {color：＃ECBE24; }} / * IE * /<！ -  [if IE]> .full-stars {color：＃ECBE24; }<！[endif]  - >  

< ; div class =ratings> < div class =empty-stars>< / div> < div class =full-starsstyle =width：70％>< / div>< / div>

div>

When I am try style=width:60% to .rating class, gold color should be fill up only 3 stars and rest of stars should be blank but it does not work. Please help me what is my mistake ?

My html code:

<div class="star">
   <div class="rating" style="width:60%">
      <span>&#9734;</span>
      <span>&#9734;</span>
      <span>&#9734;</span>
      <span>&#9734;</span>
      <span>&#9734;</span> 
   </div>
</div>

My css code:

.star{ width:200px; position: relative;color: #bdbdbd;}

.rating span
 {   
    font-size:30px;
    margin-left:-4px;
    white-space: nowrap;
    overflow: hidden;
 }

.rating  span:before { 
 content:"\2605";
 position: absolute;
 color:gold;
 }

CHECK fiddle link

解决方案

This is what I have previously used. This works quite nicely - you can even have a fraction of a star filled out...

https://jsfiddle.net/4qqspqxh/

.ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
}

.full-stars{
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
}

.empty-stars:before,
.full-stars:before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 14pt;
}

.empty-stars:before {
  -webkit-text-stroke: 1px #848484;
}

.full-stars:before {
  -webkit-text-stroke: 1px orange;
}

/* Webkit-text-stroke is not supported on firefox or IE */
/* Firefox */
@-moz-document url-prefix() {
  .full-stars{
    color: #ECBE24;
  }
}
/* IE */
<!--[if IE]>
  .full-stars{
    color: #ECBE24;
  }
<![endif]-->

<div class="ratings">
  <div class="empty-stars"></div>
  <div class="full-stars" style="width:70%"></div>
</div>

这篇关于只使用css宽度填充60％星号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！