CSS部分填充的星星和间距

Question

我正在使用HTML和CSS来显示基于百分比的星级。我正在尝试使该百分比与填充的星星的百分比相匹配。

我关闭了它，但是当我添加“ letter-spacing”和“ padding-left” CSS使其在网页上看起来更好时，填充区域的百分比会发生变化。

这是我的HTML和CSS：

.score {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
}

.score::before,
.score span::before {
  content: "?????";
  display: block;
}

.score span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.scorePadded {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
  letter-spacing: 20px;
  padding-left: 5px;
}

.scorePadded::before,
.scorePadded span::before {
  content: "?????";
  display: block;
}

.scorePadded span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding-left: 5px;
}

body {
  background: black;
}

<div>
  <span class="score"><span style="width: 68.0%"></span></span>
</div>
<div>
  <span class="scorePadded"><span style="width: 68.0%"></span></span>
</div>

我想让底部的星星（具有间距）填充到与顶部的星星相同的百分比（我相信正确地显示了68％的填充），但是间距不允许这样做。

Answer 1

差距使这比简单的百分比更复杂。我不相信有一个 CSS 解决方案可以解决这些差距，以便将填充明确应用于星星本身。

也就是说，通过一些数学运算，您可以使用公式应用正确的宽度。

在我看来，您需要将评分乘以星星的宽度。这告诉我们要填充多少，以像素为单位。例如，rating * starWidth，其中 rating 是 out of 5。

然后，您需要为每个间隙添加。得分跨越的差距数量可以表示为Math.floor(rating)。要获得以像素为单位的宽度，它是Math.floor(rating) * gapSize. 这是我们必须添加多少像素以解决大间隙，确保当我们达到一个时，我们开始填充下一颗星星而不是它们之间的间隙。

通过添加填充宽度和间隙宽度，您会得到：

totalWidthInPixels = (rating * starWidth) + (gaps * gapSize);

看到你提到你正在使用 Jekyll 计算这个百分比，而我对 Jekyll 一无所知，我会让你填写那部分。

可以在下面看到该公式的演示。

totalWidthInPixels = (rating * starWidth) + (gaps * gapSize);

const span1 = document.getElementById("score");
const span2 = document.getElementById("scorePadded");

const rating = parseFloat(prompt("Enter rating between 0-5"));
const starWidth = span1.offsetWidth / 5.0;
const gapSize = (span2.offsetWidth - span1.offsetWidth - 5) / 5.0;
const gaps = Math.floor(rating);

const width = (rating * starWidth) + (gaps * gapSize);

span1.style.width = `${(rating/5) * 100}%`;
span2.style.width = `${width}px`;

console.log("star width: ", starWidth);
console.log("gap size: ", gapSize);
console.log("fill width: ", width);

.score {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
}

.score::before,
.score span::before {
  content: "?????";
  display: block;
}

.score span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.scorePadded {
  margin-bottom: 5px;
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  position: relative;
  text-shadow: 0px 0px 4px #FFF;
  letter-spacing: 20px;
  padding-left: 5px;
}

.scorePadded::before,
.scorePadded span::before {
  content: "?????";
  display: block;
}

.scorePadded span {
  color: #E6DB74;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  padding-left: 5px;
}

body {
  background: black;
}