盒子里的星级答案

【问题标题】：star-rating inside a box盒子里的星级
【发布时间】：2018-06-07 15:52:07
【问题描述】：

我想在一个方形盒子里有一个星级。框的上面〜2/3是“标题”。下面，有 5 颗星彼此相邻。它们应该跨越盒子的整个尺寸。

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

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

.checked {
  color: orange;
}

<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>

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

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

我该如何解决这个问题？

【问题讨论】：

我认为唯一的方法（如果 vw 不起作用）是使用 svg / img 作为星号，否则您需要 js 根据跨度的大小（css 不能这样做）
因此有可能有一个宽度为 20% 的 svg 图像并告诉它在其全尺寸上绘制一颗星星吗？
你只是把svg放在span里，让它100%宽，然后它会一直填满span？
好的。我会试试的。我怎样才能摆脱跨度之间的空间？在 Firefox 调试器中，我看到它们之间有一些空格。我猜，是因为换行。
啊大众确实有效！请参阅下面的答案。但是为了回答您的空格问题 - 内联元素（默认情况下跨度是内联的）被视为句子中的单词，如果它们之间有空格，则会添加一个空格。您可以注释掉空格、浮动元素或使用 flex 就像在答案中一样

标签： html css

【解决方案1】：

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

.rating {
  display: flex;
}

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

【讨论】：

不错！ display: flex .rating 班级让我的星星彼此相邻！ font-size: 20vw 但是相对于视口缩放它们。这是一个参数，我可以手动调整。谢谢！ :)
我比我的例子更喜欢这种方式。使用 flex，每个.star 可以有flex-grow: 1 来自动处理宽度百分比。这样他就可以多加 1 颗星，每颗星的宽度相同，约为 16%

【解决方案2】：

您当前的字体大小正在缩放到“视图宽度”的 1%。传统上，您可以将1vw 更改为固定像素大小或响应em 值，以主动适应父字体。为简单起见，下面是一个像素值示例：

.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;
}

<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>

【讨论】：

这看起来不错。调整大小后，它会产生一个可行的结果。谢谢！