span中的显示块不起作用。如何使其跨度与上一个跨度相同？

Posted 2021-05-03

我在角度上使用these bootstrap components进行评级，并获得以下代码：

<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像素，但最后一个为598像素。我需要最后一个与前一个完全相同，以便应用相应的宽度％并覆盖星星，直到达到适当的百分比为止（请参阅“自定义十进制评分”，其中第四颗心仅被部分覆盖）。

我到处都读到，这是通过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。我删除了此flex，但仍然遇到相同的问题。

我如何使最后一个span的宽度与父级的宽度一样？可能是以前的div影响了吗？怎么样？

谢谢