文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >多个5星评论行HTML

问多个5星评论行HTML
EN

Stack Overflow用户
提问于 2016-03-09 02:08:45
回答 1查看 961关注 0票数 0

你好，

我试图建立一个5星级的形式，我想有3行的5星级评级。我现在拥有的是：

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

正如您可以从下面的中看到的那样，所选内容根本无法工作。尝试以不同的方式命名这3行，并给它们提供不同的ID，但仍然无法工作。

forms
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-03-09 12:21:51

你好，伙计们，

多亏了https://stackoverflow.com/questions/30991572/...，我成功地修复了它。我所提供的问题和答案的链接可被视为这些案件的普遍解决办法。下面是我应用的HTML的更改：

代码语言：javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35881650

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档