Html 使用按宽度定义的字体星级

目前，对于评论，我使用css与背景类一起显示的星级。
但我想用字体来代替它，因为字体在高分辨率屏幕上更清晰

唯一的问题是评级是由%中的宽度类动态定义的。
我无法将代码更改为定义宽度的不同div类

例如，使用类

width=“80%；”

最高分数是5颗星

应该是这样的：

我怎样才能用超棒的星星替换这个字体

另请参见此JSFIDLE:

请检查此链接。希望这能解决你的问题

导入url（http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css）； .评级框。评级：之后{ 字体系列：Fontsome； 内容：“\f005”； 字体大小：13px； 右边距：5px； 垂直对齐：顶部； 线高：15px！重要； } .评级箱{ 背景：无； 颜色：#eee； } .评级{ 颜色：黄色； 浮动：左； } .残疾人{ 颜色：#eee； }

---

此答案包括两种解决方案。第一种是纯CSS。您只需将一个类设置为表示从0到10的分数。第二个片段更简单、更灵活；它允许您在标记本身中设置百分比

在这两个示例中，我都使用了Wingdings字体中的星星，但您可以使用其他字体和字符，甚至可以使用背景图像。在这两种情况下，解决方案都是有一个灰色的恒星背景和一个金色的覆盖层，该覆盖层被剪裁到合适的宽度

1：用于指示0到10之间的值的预定义类

我认为只要使用一点CSS，您就可以简单地做到这一点。您可以使用特殊字体，但Wingdings可能也是一种选择。它包含两颗你可以使用的星星

下面的代码片段显示，您只需使用一个元素即可完成此操作。将类别

得分

，以及其中一个类别

s0

添加到

s10

，以指示从0到10的得分。当然，您可以添加嵌套跨距，并在style属性中为黄色跨距指定80%的宽度，而不是使用

：：before

和

：：after

伪元素，但在我的示例中，score元素与它的显示方式更为分离，我认为这是一种更好的方法

CSS非常冗长，但是使用像SCSS这样的预处理器，您可能可以用更紧凑的方式编写它

我会选择1到10，因为你表示你也想要半颗星（这很常见）。通过使用10的刻度，可以使用整数值，从程序员的角度来看，这更直观。您只需要一个整数，然后通过CSS将其转换为半星

当然，你可以用任何字体的符号来完成这一点

.score{
显示：内联块；
字体系列：Wingdings；
字体大小：30px；
颜色：#ccc；
位置：相对位置；
}
.分数：：之前，
.分数：：之后{
内容：“\2605\2605\2605\2605\2605\2605”；
显示：块；
}
.分数：：之后{
颜色：金色；
位置：绝对位置；
排名：0；
左：0；
溢出：隐藏；
}
.score.s0：：之后{
宽度：0%；
}
.score.s1：：之后{
宽度：10%；
}
.score.s2：：之后{
宽度：20%；
}
.score.s3：：之后{
宽度：30%；
}
。分数。s4：：之后{
宽度：40%；
}
.得分。s5：：之后{
宽度：50%；
}
中六：之后{
宽度：60%；
}
。分数。s7：：之后{
宽度：70%；
}
.得分。s8：：之后{
宽度：80%；
}
.score.s9：：之后{
宽度：90%；
}
.得分.s10:：之后{
宽度：100%；
}

---

分数是：

如果您想使用有轮廓的星星，因此无法使用颜色属性，您可以使用简单的方法

为星星创建一个容器，并为其指定

position:relative

属性

在该容器中，创建第一个包含5个空格的元素 明星

在同一个容器中，创建第二个包含5个完整元素的元素 星星，并赋予它这些属性：

位置：绝对；排名：0；左：0；空白：nowrap具有所需的宽度

---

问题还不清楚，而且演示效果不好，您是否正在寻找

display:inline block

以便定义元素的宽度？@sdcr我想用字体替换当前的css。我需要的是背景中的五星评级，并且高于宽度定义的评级：%。100%宽度为5星级，80%为4星级等。谢谢！唯一的问题是代码是以宽度%动态加载的。所以我不能轻易地在不同的div类中更改它。哦，好的。所以你可以看看CSS3伪类，比如最后一个孩子，第n个孩子…这将有帮助，它应该是什么样子，因为我需要用动态宽度定义它。你有JSFIDLE的例子吗？我唯一的建议是改用最新版本的font awesome。将3.2.1替换为4.3.0。@Jelle，请再次查看我更新的JSFIDLE链接。谢谢但是宽度是在div的html中定义的，所以我不能在css中定义它。平均分数也可能有96%这样的宽度，那么我应该如何处理呢？我添加了第二个片段来说明这一点。它使CSS变得更短，HTML几乎不再复杂。在这个例子中，我把它提高了88%，正如你所看到的，它只差4.5颗星。第二个选项对我不起作用（可能是因为我使用的是引导），因为减小宽度会导致星星被放在一条新的线上。我只添加了

空白：pre到
.score span
选择器。