Css 在不同的行上使用iCheck:复选框和标签（希望它们是内联的）

我正在使用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>

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

有一个小错误，你可能错过了

我制作了一个样本来解释证据

只需像这样修改代码

  <ul>
  @foreach ($friends as $friend)
    <li>
    <div class="facebook_friend">
    <input tabindex="1" type="checkbox" name="friend" id="{{$friend}}" value="{{$friend}}">
    <label for="{{$friend}}"> /* Removed display:block here */
    <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> 

编辑2：更新的小提琴

我已经更新了fiddle来验证你的代码，但在这里也可以很好的工作

---

请提供页面的实时链接以获得进一步帮助，谢谢你只需将你的

输入/checkbox

移动到标签内，如

<ul>
    @foreach ($friends as $friend)
        <li>
            <div class="facebook_friend">
                <label for="{{$friend}}" style="display:block;">
                    <input tabindex="1" type="checkbox" name="friend" id="{{$friend}}" value="{{$friend}}">
                        <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>

@foreach（$friends as$friend）


@endforeach

---

我已经解决了一个类似的问题，我还希望复选框对齐，但我需要右侧的文本能够跨越两行，而不必在复选框下方

对齐复选框的诀窍似乎是在其周围放置另一个容器（在我的例子中是

），我将其放置为绝对位置，更改默认复选框容器位置将弄乱可单击区域

<div class="rcb-recent">
<div class="rcb-recent-items">
    <!-- ROW -->
    <div class="rcb-recent-item">
        <i>
            <input type="checkbox" class="recent-cb" checked="checked" />
        </i>
        <span>
            <a href="#">1-year Master in International Cooperation &amp; Development</a>
        </span>
    </div>
    <!-- ROW -->
    <div class="rcb-recent-item">
        <i>
            <input type="checkbox" class="recent-cb" checked="checked" />
        </i>
        <span>
            <a href="#">1-year Master in International Cooperation &amp; Development</a>
        </span>
    </div>
</div>
</div>

---

我仍然想知道这和拉威尔有什么关系。当你对结果的样式设置有问题时，没有人关心你在哪里生成HTML代码。不起作用。我相信由iCheck形成的“div”将迫使标签移到下一行。你知道如何处理吗？你可以在我的问题中看到iCheck是如何呈现输入的。

ins

被定位为

absolute

，如果你能改变它，你就可以得到想要的结果，这是可能的还是插件生成的？插件生成的？你能改变吗

。icheckbox{width:20px；

？不起作用。我相信由iCheck形成的“div”将迫使标签移到下一行。我想这是唯一的问题，试着从li风格中去掉浮动，请看更新的答案，在我的小提琴中它是有效的，所以在这里它也应该有效，或者请发布live页面的链接以获得更好的想法。谢谢，请检查更新的fiddle2，它可以与您提供的CSSFiddle一起正常工作。该主机（包括icheck.min.js）不再承载该文件

<ul>
    @foreach ($friends as $friend)
        <li>
            <div class="facebook_friend">
                <label for="{{$friend}}" style="display:block;">
                    <input tabindex="1" type="checkbox" name="friend" id="{{$friend}}" value="{{$friend}}">
                        <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>

<div class="rcb-recent">
<div class="rcb-recent-items">
    <!-- ROW -->
    <div class="rcb-recent-item">
        <i>
            <input type="checkbox" class="recent-cb" checked="checked" />
        </i>
        <span>
            <a href="#">1-year Master in International Cooperation &amp; Development</a>
        </span>
    </div>
    <!-- ROW -->
    <div class="rcb-recent-item">
        <i>
            <input type="checkbox" class="recent-cb" checked="checked" />
        </i>
        <span>
            <a href="#">1-year Master in International Cooperation &amp; Development</a>
        </span>
    </div>
</div>
</div>

.rcb-recent {
  width: 200px
}

.rcb-recent-item {
  position: relative;
  margin-bottom: 10px
}

.rcb-recent-item i {
  position: absolute;
  left: 0;
  top: 0;
}

.rcb-recent-item span {
  display: block;
  margin-left: 30px;
}