与复选框重叠的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

这里就是答案。

我添加了所有 “text1” 中的 “文本2” 等在<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; 
     }