おはようございます。CSSの星格付け分離
こんにちは、私は質問があります:私は星がお互いに近く、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;
}
注:私は、ブートストラップグリッドを使用するか、一つだけ星が記入されます入力の周りに任意のdivタグを使用しようとすると。
これを解決するにはどうすればよいですか?
ありがとうございました。 (星がいっぱいで)
は、それが働いた、どうもありがとうございました。 PD:塗りつぶしの問題は、たとえば