在创建css 5星评级时遇到麻烦

Question

这是我尝试过的。我想要5颗星，并且第二颗星和第二颗星重叠在第一颗星上。请帮忙。这是小提琴http://jsfiddle.net/m3Yw8/1/

<div id="container">
  <div class="star blankstar" id="outer">★</div>
  <div id="inner">
  <div style="width:50%;" class="star goldstar">★</div>
</div>
</div>
/*need 2nd star next to 1st star.*/
<div id="container">
 <div class="star blankstar" id="outer">★</div>
<div id="inner">
   <div style="width:50%;" class="star goldstar">★</div>
</div>
</div>

Answer 1

将内部恒星放置在外部恒星内部，并使用position:relative作为外部恒星

http://jsfiddle.net/m3Yw8/5/

顺便说一句。如果你有多个，你应该使用类而不是id！ id在整个文档中是唯一的。这包括容器，内部和外部

Answer 2

给一些左边距

我将容器的小提琴CSS更改为此，例如

#container {
float: left;
margin: 1em;
}