复选框标签错误答案

【问题标题】：Label of Checkbox is wrong复选框标签错误
【发布时间】：2015-12-01 20:28:29
【问题描述】：

我的问题是我有一个<asp:CheckBoxList>，我有 2 个带有文本的列表项，但我的文本在我的复选框内，我到处搜索，但没有找到答案。我想要做的就是让文本与文本框的右侧对齐，而不是在其中。

这里有一些代码可以检查一下：

    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12">
         <div class="col-xs-12 col-sm-4 col-md-4">
            <div class="squaredTwo">
               <asp:CheckBoxList
                   ID="squaredTwo"
                   CellPadding="5"
                   CellSpacing="5"
                   runat="server">
                <asp:ListItem Text="Hello i'm fred" />
                <asp:ListItem Text="Hello i'm mike" />
                </asp:CheckBoxList>
              </div>
            </div>
          </div>

CSS

 .squaredTwo #squaredTwo {
        margin-top: 5px;
    }

    .squaredTwo {
        width: 24px;
        height: 24px;
        background: #f5f5f5;
        background: -webkit-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
        background: -moz-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
        background: -o-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
        background: -ms-linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
        background: linear-gradient(top, #0099b5 0%, #0099b5 40%, #0099b5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
        position: relative;
    }

    .squaredTwo input[type=checkbox] {
            margin-left: 5px;
    }

        .squaredTwo label {
            cursor: pointer;
            position: absolute;
            width: 20px;
            height: 20px;
            left: 2px;
            top: 2px;
            background: -webkit-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
            background: -moz-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
            background: -o-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
            background: -ms-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
            background: linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#f5f5f5',GradientType=0 );
        }

            .squaredTwo label:after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
                opacity: 0;
                content: '';
                position: absolute;
                width: 12px;
                height: 7px;
                background: transparent;
                top: 5px;
                left: 4px;
                border: 3px solid #0099b5;
                border-top: none;
                border-right: none;
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

            .squaredTwo label:hover::after {
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
                filter: alpha(opacity=30);
                opacity: 0.3;
            }

        .squaredTwo input[type=checkbox]:checked + label:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
            opacity: 1;
        }

【问题讨论】：

我有一个asp:CheckboxList** 不知道为什么没有出现
我们需要查看输出 HTML...asp 对我们没有多大用处。
看看这是否有帮助i.imgur.com/F4OPqcJ.png
我们无法诊断图像...这就是我们需要 HTML 和 CSS 的原因。然而，这个 div 只有 24px x 24px 所以这可能是一个开始的地方。
这正是发生的事情：codepen.io/anon/pen/Yymvpx 文本在复选框上方

标签： html css checkbox label

【解决方案1】：

我解决了这个问题。我只是使用了另一个 CSS 但相同的 HTML。如果您对此有任何疑问，请点击此处：

input[type=checkbox] {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

    input[type=checkbox] + label {
        padding-left: 29px;
        height: 23px;
        display: inline-block;
        line-height: 23px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 14px;
        margin-bottom: 20px;
        vertical-align: middle;
        font-weight: normal;
        cursor: pointer;
        color: #000;
        font-family: sans-serif;
    }

    input[type=checkbox]:checked + label {
        background-position: 0 -23px;
    }

label {
    background-image: url(nameofyourimage);
    background-size: 23px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

PS：你需要这样的图片：http://i.imgur.com/zg4tHVq.png

【讨论】：