css文本与复选框重叠

Question

我的CSS样式有问题。由于某些原因，Text1，Text2，Text3和Text4与内容重叠而未显示。你可以帮我吗？我需要它们位于复选框的右侧。

这是我的代码

HTML

<div ID="campaignDiv" runat="server" >
    <ul>
        <li>
            Text1
            <input type="checkbox" id="1" value="1"/>
            <label for="1"></label>
        </li>
         <li>
             Text2
            <input type="checkbox" id="2" value="2"/>
            <label for="2"></label>
        </li>
         <li>
             Text3
            <input type="checkbox" id="3" value="3"/>
            <label for="3"></label>
        </li>
         <li>
             Text4
            <input type="checkbox" id="4" value="4"/>
            <label for="4"></label>
        </li>
    </ul>
</div>

CSS

#DropdownSeviceLink {
    float: right;
    margin-right: 10px;
}

a#DropdownServiceLink:visited {
    color: inherit;
}

#campaignDiv {
    background-color: #374954;
    width: 200px;
    height: 150px;
    padding-bottom: 10px;
    position:relative;
    top: 40px;
    right: 0;
}

    #campaignDiv ul {
        color: #fff;
        list-style: none;
        overflow: auto;
        padding-left:5px;

    }

    #campaignDiv input[type=checkbox] {
        visibility: hidden;
    }

        #campaignDiv input[type=checkbox]:checked + label {
            left: 60px;
            background: #26ca28;
        }

    #campaignDiv li {
        width: 100px;/*120*/
        height: 25px;/*40*/
        background: #333;
        margin: 13px 0px;/*20px 60px*/
        border-radius: 50px;
        position: relative;
    }

        #campaignDiv li:before {
            content: 'On';
            position: absolute;
            top: 5px;/*12*/
            left: 13px;
            height: 2px;
            color: #26ca28;
            font-size: 16px;
        }

        #campaignDiv li:after {
            content: 'Off';
            position: absolute;
            top: 5px;/*12*/
            left: 71px;/*84*/
            height: 2px;
            color: #111;
            font-size: 16px;
        }

        #campaignDiv li label {
            display: block;
            width: 36px;/*52*/
            height: 18px;/*22*/
            border-radius: 50px;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            position: absolute;
            top: 4px;/*9*/
            z-index: 1;
            left: 12px;
            background: #ddd;
        }

Answer 1

这是答案。

我添加了所有＆＃34; Text1＆＃34; ＆＃34;文本2＆＃34;等<span>标记中的其他内容，然后使用margin-left:110px.

对其进行样式设置

HTML

  <div ID="campaignDiv" runat="server" >
                            <ul>
                                <li>
                                    <span class="texts">Text1</span>
                                    <input type="checkbox" id="1" value="1"/>
                                    <label for="1"></label>
                                </li>
                                 <li>
                                    <span class="texts">Text2</span>
                                    <input type="checkbox" id="2" value="2"/>
                                    <label for="2"></label>
                                </li>
                                 <li>
                                    <span class="texts">Text3</span>
                                    <input type="checkbox" id="3" value="3"/>
                                    <label for="3"></label>
                                </li>
                                 <li>
                                    <span class="texts">Text4</span>
                                    <input type="checkbox" id="4" value="4"/>
                                    <label for="4"></label>
                                </li>
                            </ul>
                        </div>

CSS

.texts
{
    margin-left:110px;
}

#DropdownSeviceLink {
    float: right;
    margin-right: 10px;
}

a#DropdownServiceLink:visited {
    color: inherit;
}

#campaignDiv {
    background-color: #374954;
    width: 200px;
    height: 150px;
    padding-bottom: 10px;
    position:relative;
    top: 40px;
    right: 0;
}

    #campaignDiv ul {
        color: #fff;
        list-style: none;
        overflow: auto;
        padding-left:5px;

    }

    #campaignDiv input[type=checkbox] {
        visibility: hidden;
    }

        #campaignDiv input[type=checkbox]:checked + label {
            left: 60px;
            background: #26ca28;
        }

    #campaignDiv li {
        width: 100px;/*120*/
        height: 25px;/*40*/
        background: #333;
        margin: 13px 0px;/*20px 60px*/
        border-radius: 50px;
        position: relative;
    }

        #campaignDiv li:before {
            content: 'On';
            position: absolute;
            top: 5px;/*12*/
            left: 13px;
            height: 2px;
            color: #26ca28;
            font-size: 16px;
        }

        #campaignDiv li:after {
            content: 'Off';
            position: absolute;
            top: 5px;/*12*/
            left: 71px;/*84*/
            height: 2px;
            color: #111;
            font-size: 16px;
        }

        #campaignDiv li label {
            display: block;
            width: 36px;/*52*/
            height: 18px;/*22*/
            border-radius: 50px;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            position: absolute;
            top: 4px;/*9*/
            z-index: 1;
            left: 12px;
            background: #ddd;
        }