2016-07-01 5 views
0

おはようございます。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タグを使用しようとすると。

これを解決するにはどうすればよいですか?

ありがとうございました。 (星がいっぱいで)

答えて

1

jsfiddle

はわずか5節(あなたが5つ星を持っている)他の問題のため

にdiv要素を分割ここを参照してくださいあなたは私の例を与えることができますか?

コード:

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

は、それが働いた、どうもありがとうございました。 PD:塗りつぶしの問題は、たとえば

のようにこれを使用すると、クリックする前に星を塗りつぶすことはありませんが、必要に応じてyourhelpを使って作業していることです –

0

あなたはそれがすべてのデバイスで動作するように星が1つの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; 
} 
関連する問題