Question

我的问题是我有一个<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;
        }

Answer 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

Checkbox标签错误

1 个答案: