您好
我试图建立一个5星评级表，我想要3行5星评级。这就是我所拥有的：
.ratingLabel {
font-family: 'Montserrat Light',Helvetica,sans-serif;
padding: 8px 0;
float: left;
color: #A9A9A9;
}
.rating {
float: right;
}
.rating input {
display: none;
}
.rating label {
color: #ddd;
float: right;
}
.rating label:before {
margin: 5px;
font-size: 20px;
font-family: fontAwesome;
display: inline-block;
content: "\f005";
}
.rating .half:before {
content: "\f089";
position: absolute;
}
.rating > input:checked ~ label,.rating:not(:checked) > label:hover,.rating:not(:checked) > label:hover ~ label {
color: #FFD700;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Friendly advisor:</label>
<div class="rating">
<input id="star5" name="rating" type="radio" value="5"/>
<label for="star5" class="full"></label>
<input id="star4.5" name="rating" type="radio" value="4.5"/>
<label for="star4.5" class="half"></label>
<input id="star3" name="rating" type="radio" value="3"/>
<label for="star3" class="full"></label>
<input id="star3.5" name="rating" type="radio" value="3.5"/>
<label for="star3.5" class="half"></label>
<input id="star2" name="rating" type="radio" value="2"/>
<label for="star2" class="full"></label>
<input id="star2.5" name="rating" type="radio" value="2.5"/>
<label for="star2.5" class="half"></label>
<input id="star1" name="rating" type="radio" value="1"/>
<label for="star1" class="full"></label>
<input id="star1.5" name="rating" type="radio" value="1.5"/>
<label for="star1.5" class="half"></label>
<input id="star0" name="rating" type="radio" value="0"/>
<label for="star0" class="full"></label>
<input id="star0.5" name="rating" type="radio" value="0.5"/>
<label for="star0.5" class="half"></label>
</div>
</div>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Call line quality:</label>
<div class="rating">
<input id="star5" name="rating" type="radio" value="5"/>
<label for="star5" class="full"></label>
<input id="star4.5" name="rating" type="radio" value="4.5"/>
<label for="star4.5" class="half"></label>
<input id="star3" name="rating" type="radio" value="3"/>
<label for="star3" class="full"></label>
<input id="star3.5" name="rating" type="radio" value="3.5"/>
<label for="star3.5" class="half"></label>
<input id="star2" name="rating" type="radio" value="2"/>
<label for="star2" class="full"></label>
<input id="star2.5" name="rating" type="radio" value="2.5"/>
<label for="star2.5" class="half"></label>
<input id="star1" name="rating" type="radio" value="1"/>
<label for="star1" class="full"></label>
<input id="star1.5" name="rating" type="radio" value="1.5"/>
<label for="star1.5" class="half"></label>
<input id="star0" name="rating" type="radio" value="0"/>
<label for="star0" class="full"></label>
<input id="star0.5" name="rating" type="radio" value="0.5"/>
<label for="star0.5" class="half"></label>
</div>
</div>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Overall satisfaction:</label>
<div class="rating">
<input id="star5" name="rating" type="radio" value="5"/>
<label for="star5" class="full"></label>
<input id="star4.5" name="rating" type="radio" value="4.5"/>
<label for="star4.5" class="half"></label>
<input id="star3" name="rating" type="radio" value="3"/>
<label for="star3" class="full"></label>
<input id="star3.5" name="rating" type="radio" value="3.5"/>
<label for="star3.5" class="half"></label>
<input id="star2" name="rating" type="radio" value="2"/>
<label for="star2" class="full"></label>
<input id="star2.5" name="rating" type="radio" value="2.5"/>
<label for="star2.5" class="half"></label>
<input id="star1" name="rating" type="radio" value="1"/>
<label for="star1" class="full"></label>
<input id="star1.5" name="rating" type="radio" value="1.5"/>
<label for="star1.5" class="half"></label>
<input id="star0" name="rating" type="radio" value="0"/>
<label for="star0" class="full"></label>
<input id="star0.5" name="rating" type="radio" value="0.5"/>
<label for="star0.5" class="half"></label>
</div>
</div>
正如您可以从以下 link 中看到直播，选择无效。尝试以不同的方式命名3行并给它们提供不同的ID，但仍然没有用。
答案 0 :(得分：0)
大家好，
感谢https://stackoverflow.com/questions/30991572/...，我设法解决了这个问题。我提供的问题和答案的链接可以被视为对这些案例的通用解决方案。以下是我应用的 HTML 的更改：
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Friendly advisor:</label>
<div class="rating">
<input id="star_a-5" name="rating_a" type="radio" value="5"/>
<label for="star_a-5" class="full"></label>
<input id="star_a-45" name="rating_a" type="radio" value="4.5"/>
<label for="star_a-45" class="half"></label>
<input id="star_a-3" name="rating_a" type="radio" value="3"/>
<label for="star_a-3" class="full"></label>
<input id="star_a-35" name="rating_a" type="radio" value="3.5"/>
<label for="star_a-35" class="half"></label>
<input id="star_a-2" name="rating_a" type="radio" value="2"/>
<label for="star_a-2" class="full"></label>
<input id="star_a-25" name="rating_a" type="radio" value="2.5"/>
<label for="star_a-25" class="half"></label>
<input id="star_a-1" name="rating_a" type="radio" value="1"/>
<label for="star_a-1" class="full"></label>
<input id="star_a-15" name="rating_a" type="radio" value="1.5"/>
<label for="star_a-15" class="half"></label>
<input id="star_a-0" name="rating_a" type="radio" value="0"/>
<label for="star_a-0" class="full"></label>
<input id="star_a-05" name="rating_a" type="radio" value="0.5"/>
<label for="star_a-05" class="half"></label>
</div>
</div>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Call line quality:</label>
<div class="rating">
<input id="star_b-5" name="rating_b" type="radio" value="5"/>
<label for="star_b-5" class="full"></label>
<input id="star_b-45" name="rating_b" type="radio" value="4.5"/>
<label for="star_b-45" class="half"></label>
<input id="star_b-3" name="rating_b" type="radio" value="3"/>
<label for="star_b-3" class="full"></label>
<input id="star_b-35" name="rating_b" type="radio" value="3.5"/>
<label for="star_b-35" class="half"></label>
<input id="star_b-2" name="rating_b" type="radio" value="2"/>
<label for="star_b-2" class="full"></label>
<input id="star_b-25" name="rating_b" type="radio" value="2.5"/>
<label for="star_b-25" class="half"></label>
<input id="star_b-1" name="rating_b" type="radio" value="1"/>
<label for="star_b-1" class="full"></label>
<input id="star_b-15" name="rating_b" type="radio" value="1.5"/>
<label for="star_b-15" class="half"></label>
<input id="star_b-0" name="rating_b" type="radio" value="0"/>
<label for="star_b-0" class="full"></label>
<input id="star_b-05" name="rating_b" type="radio" value="0.5"/>
<label for="star_b-05" class="half"></label>
</div>
</div>
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
<label class="ratingLabel">Overall satisfaction:</label>
<div class="rating">
<input id="star_c-5" name="rating_c" type="radio" value="5"/>
<label for="star_c-5" class="full"></label>
<input id="star_c-45" name="rating_c" type="radio" value="4.5"/>
<label for="star_c-45" class="half"></label>
<input id="star_c-3" name="rating_c" type="radio" value="3"/>
<label for="star_c-3" class="full"></label>
<input id="star_c-35" name="rating_c" type="radio" value="3.5"/>
<label for="star_c-35" class="half"></label>
<input id="star_c-2" name="rating_c" type="radio" value="2"/>
<label for="star_c-2" class="full"></label>
<input id="star_c-25" name="rating_c" type="radio" value="2.5"/>
<label for="star_c-25" class="half"></label>
<input id="star_c-1" name="rating_c" type="radio" value="1"/>
<label for="star_c-1" class="full"></label>
<input id="star_c-15" name="rating_c" type="radio" value="1.5"/>
<label for="star_c-15" class="half"></label>
<input id="star_c-0" name="rating_c" type="radio" value="0"/>
<label for="star_c-0" class="full"></label>
<input id="star_c-05" name="rating_c" type="radio" value="0.5"/>
<label for="star_c-05" class="half"></label>
</div>
</div>