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/

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

<强> CSS：

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

Answer 2

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

试试这个。

输入评级从右到左

2 个答案: