只使用css宽度填充60％的星

Question

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

我的HTML代码：

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

我的css代码：

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

检查小提琴链接

Answer 1

这就是我以前使用的。 这很好用 - 你甚至可以填充一小部分星......

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> 

Answer 2

你需要交换你的灰色和金色开始。 每颗星都是30px，所以总大小是150px，而不是200px。 要防止开始包装到下一行，请使用overflow: hidden; 。 试试这个：

 .star{ width:150px; position: relative;color: #bdbdbd;} .rating { width:60%; overflow: hidden; white-space: nowrap; } .rating span{ font-size:30px; white-space: nowrap; overflow: hidden; color: gold; } .rating span:before { content:"\\2606\\2606\\2606\\2606\\2606"; position: absolute; color: #bdbdbd; z-index: -1; } 

 <div class="star"> <div class="rating"> <span>&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;</span> </div> </div> 

注意：IE中每颗星的宽度为30px，因此总宽度为150px。 但是，在Chrome中，星的宽度为25px，因此总宽度为125px。 要解决这个问题，所以你的百分比在浏览器中起作用，你需要使用display: inner-block; width: 30px;来指定每个星的宽度display: inner-block; width: 30px; display: inner-block; width: 30px; 。