Html 为什么我的CSS星形层没有正确对齐？

我想让黄色的星星完全遮住蓝色的星星

有人能帮我完成吗？或者至少指向正确的方向

这是我的代码：

.starratingcss{
宽度：100px；
}
.星级评定css top{
显示：块；
高度：22px；
位置：相对位置；
溢出：隐藏；
}
.star ratings css底部：：之前{
颜色：#167ac6；
内容：“★★★★★";
字体大小：22px；
位置：绝对位置；
}
.star ratings css top:：before{
颜色：#f4b414；
内容：“★★★★★";
字体大小：22px；
位置：相对位置；
}

---

只要删除

溢出：隐藏；

它就会像符咒一样工作。下面是4/5的一个示例

.starratingcss{
宽度：100px；
}
.星级评定css top{
显示：块；
高度：22px；
位置：相对位置；
}
.star ratings css底部：：之前{
颜色：#167ac6；
内容：“★★★★★";
字体大小：22px；
位置：绝对位置；
}
.star ratings css top:：before{
颜色：#f4b414；
内容：“★★★★";
字体大小：22px；
位置：相对位置；
}

星级图标 中的代码过于复杂，可以使用比

s更好的标记轻松完成，并且可以交互

HTML 以下演示中使用的两种类型的标记是：

<input id='ID' name='rad' type='radio'>

因此，当此规则集位于CSS中时：

 [name='rad']:checked ~ .star { `color: navy` }

它将在两种状态下设置星星的样式：默认

color:gold

（打开）或

color:navy

（关闭）

---

演示 单击一颗星星，它右边的任何星星都将关闭。单击左边或右边没有星星的地方，所有星星都将关闭。

[name=rad]{
显示：无
}
标签{
显示：内联块；
大纲：0；
字体大小：10vh；
线高：1；
颜色：金色；
背景：无；
过渡：0.6s；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
光标：指针；
}
[name=rad]：选中~.star{
颜色：海军蓝；
过渡：0.6s；
}
#s0：选中~.星{
颜色：海军蓝；
过渡：0.6s；
}
[name=rad]+标签。星形：悬停{
颜色：青色；
过渡：0.4s；
}
[name=rad]+标签。星形：活动{
颜色：番茄；
过渡：0.4s；
}

★
★
★
★
★

您可以对

:before

和

:before

选择器使用绝对位置

.starratingcss{
宽度：100px；
}
.星级评定css top{
显示：块；
高度：22px；
位置：相对位置；
溢出：隐藏；
}
.star ratings css底部：：之前{
颜色：#167ac6；
内容：“★★★★★";
字体大小：22px；
位置：绝对；顶部：0；左侧：8px
}
.star ratings css top:：before{
颜色：#f4b414；
内容：“★★★★★";
字体大小：22px；
位置：绝对；顶部：-8px；左侧：0
}

尝试Chrome浏览器的“检查”功能，将CSS设置调整为您想要显示的内容

前两颗星都变为黄色，并进行了以下更改

• 移除：“高度：22px；“from.start评级css top:：before”
• 将：style=“width:31%”更改为style=“width:35%”

另一种只获得两（2）颗黄色星星的选择是

• 移除：“高度：22px；“从。开始创建css顶部
• 删除：style=“宽度：31%”
• 更改：内容：“★★“for.start ratings css top:：before

---

您可以使用一个元素简化代码

.starratingcss{
显示：内联块；
位置：相对位置；
字体大小：22px；
}
.star ratings css:：之前{
颜色：#167ac6；
内容：“★★★★★";
}
.星级评定css:：之后{
颜色：#f4b414；
内容：“★★★★★";
位置：绝对位置；
排名：0；
左：0；
宽度：var（-p，100%）；
溢出：隐藏；
空白：nowrap；
}

您的示例有几个地方不对劲：

• 顶部元素为100px的31%，但星星的宽度不同。如果将宽度设置为50%，则不会显示2½星星

• 您正在将顶部元素的高度设置为22px，这比底部元素的实际高度（22px*行高=~30px）要短，这正是您所讨论的问题

您可以使用

display:inline block

将容器拉伸到内容，即五星的实际宽度。这将使百分比宽度与正确的星号（或分数）匹配。并删除

高度：22px

。简化的代码如下所示：

.starratingcss{
显示：内联块；
位置：相对位置；
字体大小：22px；
}
.星级评定{
位置：绝对位置；
溢出：隐藏；
}
.星级评定内部：：之后{
颜色：#f4b414；
内容：“★★★★★";
}
.星级评定css:：之后{
颜色：#167ac6；
内容：“★★★★★";
}

删除

星级CSS top上的
高度
CSS属性

。谢谢。但我已经将其放在wordpress上，并将宽度设置为50%，那么它将不会显示2½颗星！在Temani Afif的方向上，如果我添加了

空白：nowrap；

并且成功了。非常感谢您。但是我已经将其放在wordpress上，并设置了width到50%则不会显示2½颗星！@LêNghĩa更新了我的答案，你需要添加

空白：nowrap；

@LêNghĩa这不是你网站上使用的代码：）仅供参考所有具有可访问开发工具的浏览器都有一个检查功能。这不是Chrome独有的（也不是第一个有检查功能的浏览器）。

<label for='ID3' class='star'>★</label> // 1. User clicks

<input id='ID3' name='rad' type='radio'> // 2. Which puts this as: [name='rad']:checked

<label for='ID4' class='star'>★</label> /* 3. Any labels that occur from this point on
will be styled: ~ .star {color:navy}*/

<input id='ID4' name='rad' type='radio'>

<label for='ID5' class='star'>★</label>

 [name='rad']:checked ~ .star { `color: navy` }