html - 评级的 Css 问题

Question

问题

1. 值(value)与我的星级评价重叠。

2. 另外，我只希望在 2 个选项之后换行，例如

Value *****  Ambience *****
service***** Food *****

jsFiddle link

CSS

 .rating {
 width: 95px;
 height: 19px;
 background: url(http://njerd.com/images/misc/StarRating.png) -113px 0 no-repeat;
 }

 .rating_05 {background-position: -95px 0;}
 .rating_10 {background-position: -76px -23px;}
 .rating_15 {background-position: -76px 0;}
 .rating_20 {background-position: -57px -23px;}
 .rating_25 {background-position: -57px 0;}
 .rating_30 {background-position: -38px -23px;}
 .rating_35 {background-position: -38px 0;}
 .rating_40 {background-position: -19px -23px;}
 .rating_45 {background-position: -19px 0;}
 .rating_50 {background-position: 0 0;}

html

<div class="rating rating_40"> Value</div>
<div class="rating rating_40"> Ambiance</div>
<div class="rating rating_45"> Service</div>
<div class="rating rating_45"> Food</div>
<div class="rating rating_25"> Music</div>

有人能帮忙吗？

Answer 1

将星星放在 div 内的 span 中/上，每个 div 中有 2 个“元素”。

固定 fiddle