css - html 5星级CSS

以下是我的5星评级系统代码。

    <span id="rateStatus"></span>
    <div id="rateMe">

        <a onclick="rateIt(this)" id="_1" title="1 - Customers do not like/want it (idea / solution / service)" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_2" title="2 - Customers will consider it only if the price is better" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_3" title="3 - Customers want it and will buy if the quality is superior to competition" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_4" title="4 - Customers need it – will share development cost if necessary" onmouseover="rating(this)" onmouseout="off(this)"></a>
        <a onclick="rateIt(this)" id="_5" title="5 - Unique offering - Customers will buy it immediately" onmouseover="rating(this)" onmouseout="off(this)"></a>

    </div>
    <span id="ratingSaved"> </span>


    <style type="text/css">
    #rateStatus{float:left; clear:both; width:100%; height:20px;}
    #ratingSaved{display:none;}
    .saved{color;brown; }

    #rateMe{float:left; clear:both; width:100%; height:auto; padding:0px; margin:0px;}
    #rateMe li{float:left;list-style:none;}
    #rateMe li a:hover,
    #rateMe .on {background:url('/resource/1314262224000/green_star') no-repeat;}
    #rateMe a{float:left;background:url('/resource/1314262035000/white_star') no-repeat;width:40px; height:40px;}




    </style>

这显示1行5星...但是我需要3行...我如何修改CSS以获得相同的结果。

提前Thnks

最佳答案

如果是出现多次的元素，则ID为唯一的类。您可以使用id区分这些行。

<div class='rateMe' id='row1' / >
<div class='rateMe' id='row2' / >
<div class='rateMe' id='row3' / >
...