Html 使用css宽度仅填充60%的星形

当我尝试

style=width:60%

to

.rating

class时，金色应该只填充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>

---

检查

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

。评级{
位置：相对位置；
垂直对齐：中间对齐；
显示：内联块；
颜色：#B1B1；
溢出：隐藏；
}
.满星{
位置：绝对位置；
左：0；
排名：0；
空白：nowrap；
溢出：隐藏；
颜色：#fde16d；
}
.空星：之前，
.满星：之前{
内容：“\2605\2605\2605\2605\2605\2605”；
字号：14pt；
}
.空星：之前{
-webkit文本笔划：1px#848484；
}
.满星：之前{
-webkit文本笔划：1px橙色；
}
/*firefox或IE不支持Webkit文本笔划*/
/*火狐*/
@-moz文档url-前缀（）{
.满星{
颜色：#ECBE24；
}
}
/*即*/

---

您需要交换灰色和金色启动。每颗星是30px，所以总大小是150px，而不是200px。要防止开始换行到下一行，请使用

overflow:hidden。试试这个：


.star{宽度：150px；位置：相对；颜色：#bdbdbd；}
.评级{
宽度：60%；
溢出：隐藏；
空白：nowrap；
}
.额定跨度{
字体大小：30px；
空白：nowrap；
溢出：隐藏；
颜色：金色；
}
.额定范围：在{
内容：“\2606\2606\2606\2606\2606\2606”；
位置：绝对位置；
颜色：#bdbd；
z指数：-1；
}

★★★★★；
你能不能用小提琴之类的东西来重现这个问题..当我将style=width:60%的宽度应用于时。评级类只填充三星而不是全部，当我将style=width:100%应用于时，用color:gold填充全明星，但它不起作用它看起来很笨拙，左边空白：4px在：before中。这是故意的吗？在我看来，没有此属性会更好。@MrLister它取决于您使用的浏览器。在IE中，它是好的。如果我去掉它，它在Chrome中看起来不错，但在IE中就不一样了。原因是星星之间有一个空格，OP用
左边的边距：-4px，但这不是一个好的解决方案，因为不同浏览器的空间大小不同。我已经删除了空间，所以现在它在所有浏览器中看起来都一样。这很好用！一个装饰性的建议：你可以使用
\2605
作为
的内容。空星：在
之前，我认为它看起来会更好。感谢您提供如此优雅的解决方案！
.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;
 }