html - CSS 部分填充星和间距
问题描述
我正在使用 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% 的填充),但间距不允许这样做。
解决方案
差距使这比简单的百分比更复杂一些。我不相信有一个 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>
推荐阅读
- excel - Excel 问题:过滤第 1 列,在第 2 列中查找最后一个,返回值第 3 列
- android - Flutter 有状态的小部件,子级不更新状态
- r - 枚举环境的 Rmarkdown 乳胶错误
- python - 在 bash 脚本中捕获 TensorFlow 输出
- php - 如何在“添加到购物车”按钮之前添加“立即购买”按钮(WordPress/Woocommerce)
- mysql - 使用 Django 将查询集中的查询组合成一个查询
- security - 为什么当url与加载的内容不匹配时会打开一个新页面
- reactjs - 如何将 reactJS 应用程序部署到 Heroku
- cluster-analysis - 股票数据的 tsfresh 时间序列聚类
- python - python sqlite3无法识别的令牌:“{”