本文介绍了只使用css宽度填充60%星号的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我尝试 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

解决方案

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





  .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%星号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-19 08:18