css 的星级评分 - 如何将文本值与图标对齐，使它们具有相同的高度和大小

Question

我需要创建一个星级评分，我希望它看起来与图片上的完全一样 ()。我使用 google 图标表示星星和数值。但是，我不知道如何将这个值与图标对齐，以便它们在同一行上。目前“(50%)”略低于星形图标的基线。我试图将数值显示为一个块并为其提供边距和填充，但这没有帮助。

这是我现在的 HTML：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
<span id="rating">(50%)</span>

如有任何帮助或技巧建议，我们将不胜感激！

Answer 1

出于某种原因，图标会自动对齐到顶部。因此，如果您使用 vertical-align: bottom;，它们将具有与文本相同的基线。

.star-wrapper i {
 vertical-align: bottom;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="star-wrapper">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
<span id="rating">(50%)</span>
</div>

css 的星级评分 - 如何将文本值与图标对齐，使它们具有相同的高度和大小

Star rating with css - how to align text value with icons, so that they are the same height and size

html

css

icons

rating