0

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

我用于复选框标签的图像出现在复选框下方的行上。你有没有看到任何事情会导致这种情况发生？我希望他们排队。我正在使用 Laravel 4。

4

3 回答 3

2

只需将您移到input/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>

演示在这里。

于 2013-10-08T14:58:07.463 回答
0

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

我创建了一个示例fiddle来解释证明，

只需像这样修改您的代码..

  <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>

我已经style="display:block"从label标签中删除了，这确实是骗人的，

检查小提琴的小样本，

编辑：由于这些无法更改可能会添加更多样式的样式表，

ul.facebook-friends li {
    list-style-image:none;
    list-style-type:none;
    white-space:normal;
    display:inline;
    padding-left:0px; /* this was lfet you need to correct it*/
    margin: 5px;
    margin-left:0; /* this was over ridden by the 5px as it was specified after */
    position:relative;
}

编辑 2：更新小提琴

我已经更新了小提琴来验证你的代码fiddle2，但这里也可以正常工作..!!

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

于 2013-10-08T07:07:04.890 回答
0

我已经解决了一个类似的问题，我也希望复选框内联对齐，但我需要右侧的文本能够跨越 2 行而不低于复选框

在这里检查小提琴

似乎对齐复选框的技巧是在它周围有另一个容器（在我的情况下<i>），我定位绝对，更改默认复选框容器位置会弄乱可点击区域。

<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>

CSS

.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;
}
于 2016-03-17T12:22:02.467 回答