html - 如何在反馈星之间添加空格?
问题描述
我使用 HTML 和 CSS 创建了五个反馈星。下面是相同的图像。
如您所见,星星彼此之间的距离太近了。我想在星星之间应用一些空间。我已经使用了边距,填充了所有内容。但没有任何工作。下面是代码:
.ratings {
position: relative;
vertical-align: middle;
display: inline-block;
color: #b1b1b1;
overflow: hidden;
}
.full-stars {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #fde16d;
}
.empty-stars:before,
.full-stars:before {
content: "\2605\2605\2605\2605";
font-size: 14pt;
}
.empty-stars:before {
-webkit-text-stroke: 1px #848484;
}
.full-stars:before {
-webkit-text-stroke: 1px orange;
}
/* Firefox */
@-moz-document url-prefix() {
.full-stars {
color: #ECBE24;
}
}
<div class="ratings">
<div class="empty-stars"></div>
<div class="full-stars" style="width:70%"></div>
</div>
下面是工作小提琴: https ://jsfiddle.net/4qqspqxh/862/
你能帮我在星星之间做一些差距吗?
解决方案
尝试这个:
.empty-stars:before, .full-stars:before {
content: "\2605\2605\2605\2605";
font-size: 14pt;
letter-spacing: 4pt;
}
推荐阅读
- java - BigInteger 模数不是正数
- javascript - 将具有数组值的对象转换为另一个对象数组
- go - Golang 将 UTF-8 字符串转换为 ASCII
- sql - 获取过去 2 周在任何给定日期发生的事件
- sql-server - 存储过程中的服务器主体错误,同时忽略 USE 中指定的数据库
- node.js - 为什么我不能安装 Angular cli?npm install -g @angular/cli 不安装
- c# - 将数据网格复选框中的值更新或插入到数据库中
- google-chrome - 如何使 Chrome 扩展在从 WebStorm 打开的 Chrome 实例中可用?
- htmx - 处理 htmxjs 中的连接错误
- python-3.x - 如何仅更改 ttk.Entry 的一侧边框宽度?