Question

我希望在方框内有星级评分。上面的~2 / 3的方框是＆＃34;标题＆＃34;。下面，有5颗星彼此相邻。它们应该超过盒子的整个尺寸。

我已经尝试了很多，但还没有任何工作。这就是我所拥有的：

＆＃13;

.star {
  padding: 0;
  width: 20%;
  font-size: 1vw;
}

.checked {
  color: orange;
}

＆＃13;

<div class="mybox">
  <div class="box-head">
    <span class="box-name">1</span>
  </div>
  <div class="box-footer">
    <div class="rating">
      <span class="star checked">★</span>
      <span class="star checked">★</span>
      <span class="star">★</span>
      <span class="star">★</span>
      <span class="star">★</span>
    </div>
  </div>
</div>

＆＃13;

我的想法是：每个星元素应占据其父元素宽度的20％。字体大小应足够大，以便星形占据其跨度大小的整个空间。

怎么可能？我尝试过的所有东西都以非常小的星星结尾，中间有很大的空间，甚至用margin或padding属性都无法控制。此外，我不知道如何正确调整字体大小。

我该如何解决这个问题？

Answer 1

如果我理解你的问题，你应该这样试试：

.rating {
  display: flex;
}

.star {
    padding: 0;
    width: 20%;
    font-size: 20vw
}

Answer 2

您当前的字体大小正在缩放到＆＃39;视图宽度＆＃39;的1％。传统上，您可以将1vw更改为固定像素大小或响应em值，以便主动适应父字体。为简单起见，这是一个像素值的例子：

＆＃13;

.rating {
  background-color: #ededed;
  box-sizing: border-box;
  border-radius: 999px;
  text-align: center;
  padding: 0 4px;
  width: 120px; /* parent width */
}

.star {
  display: inline-block;
  margin-right: -4px;
  padding: 0;
  width: 20%; /* child width */
  font-size: 16px;
}

.star.checked {
   color: orange;
}

＆＃13;

<div class="mybox">
    <div class="box-head">
        <span class="box-name">1</span>
    </div>
    <div class="box-footer">
        <div class="rating">
            <span class="star checked">★</span>
            <span class="star checked">★</span>
            <span class="star">★</span>
            <span class="star">★</span>
            <span class="star">★</span>
        </div>
    </div>
</div>

＆＃13;

框内的星级评分

2 个答案: