jquery プラグイン iCheck を使用して、チェックボックスのスタイルを設定しています。これは成功しましたが、チェックボックスとラベルを同じ行に表示できません。
メインコードは次のとおりです。
<ul class="facebook-friends">
@foreach ($friends as $friend)
<li>
<div class="facebook_friend">
<input tabindex="1" type="checkbox" name="friend" id="{{$friend}}" value="{{$friend}}">
<label for="{{$friend}}" style="display:block;">
<span class="icon"><a href="http://www.facebook.com/{{ $friend }}"><img src="https://graph.facebook.com/{{ $friend }}/picture" alt="" height="40" width="40"></a></span>
</label>
</div>
</li>
@endforeach
</ul>
CSS:
.facebook_friend {
width:150px;
}
.icon {
width:45px;
}
ul.facebook-friends {
margin:0;
padding:0;
border:0;
overflow:hidden;
*zoom:1;
width:500px;
font-family:'proxima-nova';
font-size:12px;
color:#999
}
ul.facebook-friends li {
list-style-image:none;
list-style-type:none;
margin-left:0;
white-space:normal;
display:inline;
float:left;
padding-left:0px;
margin: 5px;
}
iCheck ボックスは次のように表示されます。
<div class="icheckbox_square-blue" style="position: relative;">
<input tabindex="1" type="checkbox" name="friend" id="3607" value="3607" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>
チェックボックスのラベルに使用している画像は、チェックボックスの下の行に表示されます。これが事実になる何かが見えますか?並んでほしいです。Laravel4を使用しています。