时间戳

首页 > 解决方案 > 半星未正确定位

css - 半星未正确定位

问题描述

我在我的网站上实施了星级评分系统，但是，我遇到了一个问题：半星在移动设备（iPhone 11）上的位置不正确。它们看起来像这样： 在此处输入图像描述

CSS 代码：

.star {
    font-size: x-large;
    width: 20px;
    display: inline-block;
    color: gray;
}

.star:last-child {
    margin-right: 0;
}

.star:before {
    content: '\2605';
}

.star.on {
    color: orange;
}

.star.half:after {
    content: '\2605';
    color: orange;
    position: absolute;
    margin-left: -20px;
    width: 10px;
    overflow: hidden;
}

这是我的 HTML 代码：

<div class="stars">
        @for (int i = 0; i < StarRatingInt; i++)
        {
            <span class="star on"></span>
        }
        @if (Model.StarRating > StarRatingInt)
        {
            <span class="star half"></span>
        }
        @for (int i = 0; i < 5 - Math.Round(Model.StarRating, 0, MidpointRounding.AwayFromZero); i++)
        {
            <span class="star"></span>
        }
    </div>

我花了几个小时来解决这个问题，但无济于事。我搜索了其他星级评分系统，但没有一个看起来像我想要的那样。

标签： cssasp.netrazor-pages

解决方案

通过.star.half:after，您已将半星放在absolute位置上。所以需要在position:relative父类中添加css属性，.star把半星放在星项里面。

.star {
  font-size: x-large;
  width: 20px;
  display: inline-block;
  color: gray;

  /* This part is required */
  position: relative;
}

推荐阅读