html - 输入额定值从右到左

Question

我正在通过 html/css 制作评级系统。目前评级从右到左是活跃的..我想像默认评级系统一样从左到右评级。我在 fontawesome 的帮助下将单选按钮更改为星形图标。

这是我的代码:

HTML代码

<div class="rating-stars">
    <input type="radio" name="overall_job" id="group-overall_job-<?php echo $row->id;?>-0" value="1"  />
    <label for="group-overall_job-<?php echo $row->id;?>-0"></label>
    <input type="radio" name="overall_job" id="group-overall_job-<?php echo $row->id;?>-1" value="2" />
    <label for="group-overall_job-<?php echo $row->id;?>-1"></label>
    <input type="radio"  name="overall_job" id="group-overall_job-<?php echo $row->id;?>-2" value="3" />
    <label for="group-overall_job-<?php echo $row->id;?>-2"></label>
    <input type="radio" name="overall_job" id="group-overall_job-<?php echo $row->id;?>-3" value="4" />
     <label for="group-overall_job-<?php echo $row->id;?>-3"></label>
     <input type="radio" name="overall_job" id="group-overall_job-<?php echo $row->id;?>-4"  value="5" />
     <label for="group-overall_job-<?php echo $row->id;?>-4"></label>
 </div>

这是我的CSS代码

.ratingarea label{
    float:none;
    padding: 0;
}
/*rating stars*/
.rating-stars {
    /*
        margin-bottom: 23px;
    */
}
.rating-stars, .rating-stars label::before {
    /*
        display: inline-block;
    */
}
.rating-stars label:hover, .rating-stars label:hover ~ label {
    color: #e6b02d;
}
.rating-stars * {
    margin: 0;
    padding: 0;
}
.rating-stars input {
    display: none;
}
.rating-stars {
    position: relative;
    top: -2px;
}
.rating-stars label {
    color: #ddd;
}
.rating-stars label::before {
    font-family: 'FontAwesome';
    content: "\f005";
    width: 35px;
    font-size: 1em;
    cursor: pointer;
    /*
        margin-right: -26px;
    */
}
.rating-stars input:checked ~ label {
    color: #e6b02d;
}

请给我任何解决方案的建议。

Answer 1

演示:http://jsfiddle.net/GCu2D/905/

在label css中使用float:right，并为父容器设置display:inline-block。

CSS:

.rating-stars {
    display:inline-block;
}
.rating-stars label {
    color: #ddd;
    float:right;
}