只使用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; 。