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，其中评分超出5。

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

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

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

就像您提到的那样，您正在使用Jekyll计算该百分比，而我对Jekyll一无所知，我让您填写该部分。

下面是该公式的演示。

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;
}

<div>
  <span class="score"><span id="score"></span></span>
</div>
<div>
  <span class="scorePadded"><span id="scorePadded"></span></span>
</div>

CSS部分填充的星星和间距

1 个答案: