按百分比减少顶部 ul 的宽度以显示下面的另一个 UL

Question

我正在尝试制作一种评级部分。如果有人给产品评分 4.3，前 4 个框将被填满，第五个框将被填满三分之一。我有一个奇怪的想法，部分灵感来自 this. if you put a div or a ul on top of each other (like z-indexed) and reduced the top div's width by percentage. The top part will represent the votes(4.3) and the bottom part will be all of the li's but you could only see the ones that are not voted on on like it would be grayed and the top would be gold. but I'm starting to think that's not a good idea. It looks like I had problems trying to transfer of that star example in the link 我的盒子示例。你能帮我吗？

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.wrapper{
  margin: 1em auto;
  width: 30em;
  background: #ccc;
  height: 15em;
  position: relative;
}
.rating{
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  margin: 1em;
  position: absolute;

  /*z-index: 9;*/
}
.rating li , .second li{
  padding: 1em;
  float: right;
  background: orange;
  margin-right: .3em;
}
.rating.first{
  position: absolute;
  z-index: 1;
  display: block;
  left: 0;
  overflow: hidden;
  width: 70%;

}
.first li {
  background: red;
}
.second{
  z-index: 0;
}

<div class="wrapper">
  <ul class="rating first clearfix">
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ul>
  <ul class="rating second clearfix">
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ul>
</div>

该代码未显示正确的输出。它只是用来展示我正在使用的东西。

编辑：：也许我可以使用负边距。编辑:: 不，我认为这会弄乱与框中数字的对齐方式。

Answer 1

试试这个：

.wrapper {
  margin: 1em auto;
  width: 270px;
  height: 50px;
  position: relative;
}

.rating {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 270px;
}

.rating li {
  text-align: center;
  float: left;
  margin: 0 2px;
  background: #ccc;
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.the_rating {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 50px;
  width: 50%;
}
.the_rating li {
  background: orange;
}

<div class="wrapper">
  <ul class="rating first">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <div class="the_rating">
    <ul class="rating second">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>

如果您需要我解释任何特定部分，请告诉我。

按百分比减少顶部 ul 的宽度以显示下面的另一个 UL

Reduce a top ul's width by a percentage to reveal another UL that is underneath

html

css

rating