CSS 星级划分答案

【问题标题】：CSS star rating separationCSS 星级划分
【发布时间】：2016-07-01 16:26:31
【问题描述】：

晚安。

大家好，我有一个问题：我的页面中有一个单选按钮星级小部件，此时星星彼此靠近，我需要将它们分开（填充 div 的 witdh）。

HTML

<div class="stars-div">
    <div class="stars">
        <input class="star-input star-5" id="star-5" type="radio" name="star"/>
        <label class="star-icon star-5" for="star-5"></label>                                   
        <input class="star-input star-4" id="star-4" type="radio" name="star"/>
        <label class="star-icon star-4" for="star-4"></label>
        <input class="star-input star-3" id="star-3" type="radio" name="star"/>
        <label class="star-icon star-3" for="star-3"></label>
        <input class="star-input star-2" id="star-2" type="radio" name="star"/>
        <label class="star-icon star-2" for="star-2"></label>
        <input class="star-input star-1" id="star-1" type="radio" name="star"/>
        <label class="star-icon star-1" for="star-1"></label>
    </div>
</div>

CSS

.stars-div {
    padding-top: 9.8%;
    padding-left: 5%
}


.stars {
    display: inline-block;
    width: 100%
}

.star-input { 
    display: none; 
}

.star-icon {
    float: right;
    padding: 10px;
    font-size: 50px;
}

.star-input:checked ~ .star-icon:before {
    content: '\f005';
    color: #FD4;
}

.star-icon:hover:before, .star-icon:hover ~ .star-icon:before {
    content: '\f005';
    color: #ffea8e;
}

.star-icon:before {
    content: '\f006';
    font-family: FontAwesome;
}

注意：当我尝试使用 Bootstrap Grid 或在输入周围使用任何 div 标签时，只会填充一颗星。

我能做些什么来解决这个问题？

非常感谢。

【问题讨论】：

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

请看这里jsfiddle

只需将 div 分成 5 个部分（你有 5 颗星）

对于其他问题（星号填充）你能给我一个例子吗？

代码：

.star-icon {
  float: right;
  padding: 10px;
  font-size: 50px;
  box-sizing:border-box;
  width:20%;
}

【讨论】：

非常感谢，它成功了。 PD：填充的问题是，如果我使用这个，例如

，我不会在我点击的那个之前填充星星，但是在你的帮助下它正在工作根据我的需要

【解决方案2】：

你必须让星星在一个 div 中被阻挡，这样它才能在所有设备上工作。

HTML：

<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="stars-div">
      <div class="stars">
        <input class="star-input star-5" id="star-5" type="radio" name="star"/>
        <label class="star-icon star-5" for="star-5"></label>                                   
        <input class="star-input star-4" id="star-4" type="radio" name="star"/>
        <label class="star-icon star-4" for="star-4"></label>
        <input class="star-input star-3" id="star-3" type="radio" name="star"/>
        <label class="star-icon star-3" for="star-3"></label>
        <input class="star-input star-2" id="star-2" type="radio" name="star"/>
        <label class="star-icon star-2" for="star-2"></label>
        <input class="star-input star-1" id="star-1" type="radio" name="star"/>
        <label class="star-icon star-1" for="star-1"></label>
      </div>
    </div>
  </div>
</div>

CSS：

.stars-div {
  padding-top: 9.8%;
  padding-left: 1%
 }


.stars {
  display: inline-block;
  width: 100%
}

.star-input { 
  display: none; 
}

.star-icon {
  float: right;
  padding: 1%;
  font-size: 50px;
}

.star-input:checked ~ .star-icon:before {
  content: '\f005';
  color: #FD4;
}

.star-icon:hover:before, .star-icon:hover ~ .star-icon:before {
     content: '\f005';
     color: #ffea8e;
}

.star-icon:before {
  content: '\f006';
  font-family: FontAwesome;
}

【讨论】：