Question

问题

价值与我的星级评分重叠。
此外，我只希望在

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

将span内的星星置于div内，并拥有2＆＃34;项目＆＃34;在每个div。

修正fiddle

Answer 2

此处无需更改标记。检查更新的小提琴： https://jsfiddle.net/j3dsy29L/3/

只需添加一些样式规则：

.rating {
    float: left;
    width: 95px;
    height: 19px;
    background: url(http://njerd.com/images/misc/StarRating.png) -113px 0 no-repeat;
    text-indent: -70px;
    margin-left: 70px;
    margin-right: 10px;
}

.rating:nth-of-type(2n+1) {
    clear: left;
}

如果您需要支持不了解:nth-of-type()伪选择器的旧浏览器，也可以通过在每第三个项目上添加一个css类来解决此问题： .rating.new-line { clear: left; }

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

Answer 3

使用display: table

＆＃13;

.rating {
   display: table;    
}
.rating-row{
    display: table-row;
}
.rating-text,
.ratiog-star{
    display: table-cell;
    vertical-align: middle;
}
.rating-star{       
    display: inline-block;
    vertical-align: middle;
    background: url(http://njerd.com/images/misc/StarRating.png) -113px 0 no-repeat;
    width: 95px;
    height: 19px;  
    margin-left: 5px;
}
.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;}

＆＃13;

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

＆＃13;

使用:after

＆＃13;

.rating {
  
}
.rating:after{    
    content: '';
    display: inline-block;
    vertical-align: middle;
    background: url(http://njerd.com/images/misc/StarRating.png) -113px 0 no-repeat;
    width: 95px;
    height: 19px;  
    margin-left: 5px;
}
.rating_05:after {background-position: -95px 0;}
.rating_10:after {background-position: -76px -23px;}
.rating_15:after {background-position: -76px 0;}
.rating_20:after {background-position: -57px -23px;}
.rating_25:after {background-position: -57px 0;}
.rating_30:after {background-position: -38px -23px;}
.rating_35:after {background-position: -38px 0;}
.rating_40:after {background-position: -19px -23px;}
.rating_45:after {background-position: -19px 0;}
.rating_50:after {background-position: 0 0;}

＆＃13;

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

＆＃13;

Css问题与评级

3 个答案: