Question

我试图制作一种评级部分。如果有人对产品4.3进行评级，前4个盒子将被填满，第五个盒子将被填满第3个盒子。我有一个奇怪的想法部分受到this的启发。如果你把div或ul放在彼此的顶部（比如z-indexed）并减去顶部div的宽度百分比。顶部将代表投票（4.3），而底部部分将是所有的投票，但你只能看到那些没有被投票的投票，就像它会变灰并且顶部将是黄金一样。但我开始认为这不是一个好主意。看起来我在尝试将link中的那个明星示例转移到我的框示例时遇到了问题。你可以帮帮我吗？

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 代码没有显示正确的输出。只是在那里展示我正在做的事情。

编辑::也许我可以使用负余量。编辑:: Nah，这会使我认为的方框中的数字变得混乱。

Answer 1

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: