为什么我的评分是反向的？

Question

我正在尝试使用 CSS 进行评分。我正在使用单选按钮进行评分。当我尝试对评级进行评级时，评级正朝着相反的方向发展。从右到左。如何从左到右评分：

我试过的是：

form{
  background:#ececec;
  margin: 2rem;
  padding: 3rem;
}

.dash_btn {
  margin-left: 15px;
  font-size: 18px;
  border-radius: 5px;
}
.dash_btn:hover {
  font-size: 18px;
}

.dealer .row  {
  min-height: 110px !important;
}
.dropdown{
  float:right;
}
.dpicker{
  margin-left:1rem;
}
.checked{
  color:orange;
}
.review{
  background: #ececec;
  padding:4rem;
  margin:1rem;
}

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
border: none;
/**float: left;**/
}

.rating > input { display: none; } 
.rating > label:before { 
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}

.rating > .half:before { 
content: "\f089";
position: absolute;
}

.rating > label { 
color: #ddd; 
/**float: right; ***/
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

<form method="post" action="/updateRating" id="reviewForm">
  <input type="hidden" name="_token" value="{{csrf_token()}}"/>
  <input type="hidden" name="rate_id" value="{{rate_id}}"/>
  <div class="form-group row">
    <label for="truck" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <input type="text" name="truck_name" readonly class="form-control-plaintext" id="truck" value="{{truck_name}}">
    </div>
  </div>
  <div  class="text-center">
    <h3>
    Review the {{truck}} of {{mileage}}:  
    </h3>

    <fieldset class="rating">

      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>     
      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>

    </fieldset>                         
    <input type="submit" class="btn btn-primary text-center" value="Submit Review">

  </div>                                
</form>

输出显示为：

这里我的评分是从右到左而不是从左到右。如何解决这个问题？

Answer 1

尝试使用弹性框：

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: left; /* choose where you want to place your rating horizontally */
}

Answer 2

这是一个基于您的代码的工作示例

form{
  background:#ececec;
  margin: 2rem;
  padding: 3rem;
}   
.dash_btn {
  margin-left: 15px;
  font-size: 18px;
  border-radius: 5px;
}
.dash_btn:hover {
  font-size: 18px;
}    
.dealer .row  {
  min-height: 110px !important;
}
.dropdown{
  float:right;
}
.dpicker{
  margin-left:1rem;
}
.checked{
  color:orange;
}
.review{
  background: #ececec;
  padding:4rem;
  margin:1rem;
}    
fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/
.rating { 
  border: none;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.rating > input { 
  display: none; 
} 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.rating > .half:before { 
  content: "\f089";
  position: absolute;
}
.rating > label { 
  color: #ddd; 
}

/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<form method="post" action="/updateRating" id="reviewForm">
  <input type="hidden" name="_token" value="{{csrf_token()}}"/>
  <input type="hidden" name="rate_id" value="{{rate_id}}"/>
  <div class="form-group row">
    <label for="truck" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <input type="text" name="truck_name" readonly class="form-control-plaintext" id="truck" value="{{truck_name}}">
    </div>
  </div>
  <div  class="text-center">
    <h3>Review the {{truck}} of {{mileage}}:</h3>
    <fieldset class="rating">
      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>       
     <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
     <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star3" title="Meh - 2 stars"></label>
     <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    </fieldset>                         
    <input type="submit" class="btn btn-primary text-center" value="Submit Review">
    </div>                              
</form>