Я использую эти bootstrap компоненты в angular, чтобы получить некоторые оценки, и я получаю следующий код:
<span class="ng-star-inserted" style="cursor: pointer;">
<span _ngcontent-oof-c136="" class="star ng-star-inserted">
<span _ngcontent-oof-c136="" class="half" style="width: 70%;">★</span>★
</span>
</span>
Первые два span имеют ширину 20 пикселей , но последний 598px. Мне нужно, чтобы последний был точно таким же, как предыдущие, чтобы применить соответствующую ширину% и покрыть звезду до соответствующего процента (см. «Пользовательский десятичный рейтинг», где четвертое сердце покрыто только частично).
Я везде читал, что это делается с display: block, но это не работает. Я скопировал стили из примера:
.star {
position: relative;
display: inline-block;
font-size: 3rem;
color: #d3d3d3;
}
.full {
color: red;
}
.half {
position: absolute;
display: inline-block;
overflow: hidden;
color: red;
}
Эти span находятся внутри других div, а некоторые из них имеют display: flex. Я удалил этот флекс, но у меня все та же проблема.
Как я могу сделать этот последний span таким же широким, как родительский? Может быть, какой-то предыдущий div влияет? Как?
Спасибо