Блог

Я внедрил систему оценки звезд на своем веб-сайте, однако у меня есть одна проблема: половинки звезд расположены неправильно на мобильном устройстве (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>
  

Я потратил несколько часов на устранение этой проблемы, но безрезультатно. Я искал другие системы звездного рейтинга, но ни одна из них не выглядит так, как я хочу.

Через .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;
}