如何将一些元素显示成 div 修改宽度

Question

我想在带有空白星星的 div 上显示带有实心星星的 div。我想要的结果是显示修改 div.

宽度的实心星星

我试着解释得更好。如果宽度为 100px 显示 5 个实心星星，我希望能够将宽度设置为 83px 并仅显示 4,5 个星星。

我的问题是，现在如果我将 div 设置为 83px，最后一颗星星会漂浮在其他星星下方。我想将星星保持在固定位置并显示它的一部分。

这是我的代码：

.rating-star {
    font-size: 20px;
    color: green;
}

.vote-container {
    position: relative;
}

.full-stars {
    position: absolute;
}

.vote,
.vote-number {
    color: green;
}

.full-stars {
  display: block;
  height: 18px;
  overflow: hidden;
  width: 83px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="vote-container" id="vote-container_1">
  <span class="full-stars">
    <i class="fa rating-star fa-star"></i>
    <i class="fa rating-star fa-star"></i>
    <i class="fa rating-star fa-star"></i>
    <i class="fa rating-star fa-star"></i>
    <i class="fa rating-star fa-star"></i>
  </span>
  <i class="fa rating-star fa-star-o"></i>
  <i class="fa rating-star fa-star-o"></i>
  <i class="fa rating-star fa-star-o"></i>
  <i class="fa rating-star fa-star-o"></i>
  <i class="fa rating-star fa-star-o"></i>
</div>

Answer 1

您只需在 .full-stars class.

中添加此代码

white-space:nowrap

如何将一些元素显示成 div 修改宽度

How to display some elements into a div modifying the width

html

css

css-position

display