对齐切换按钮，使它看起来像一个

Question

所以我想对齐切换按钮我创建使用CSS来与'段描述'对齐，因为我想调用它，但我无法让它看起来像我想要的样子。我不仅提供了线框，还提供了jsfiddle。

HTML代码：

 <p id="displayOption">Display Options</p> 
     <div id="onoffSwitch"> 
      <ul id="btn" class="btn"> 
       <li class="display-title" id="spoilers"> 
        <span id="spoilerSwitch">Show&#47;Hide Spoilers:</span> 
        <ul class="selector"> 
         <li class="on"> 
          <span class="onoffswitch-inner"> 
         </li> 
         <li class="off"> 
          <span class="onoffswitch-switch"></span></span> 
         </li> 
        </ul> 
       </li> 
       <li class="display-title" id="day-night"> 
       <span id="day-nightSwitch">Day or Night Vision:</span> 
       <ul class="selector"> 
       </ul> 

      </ul> 
     </div> 

CSS代码：

/***** options *****/ 
#displayOption { 
    text-align: center; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    border: .88px #efdaae; 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    /*-moz-border-radius: 10px; 
    -webkit-border-radius: 10px;*/ 
    width: 258px; 
    background-color: #945e38; 
    padding: .1px; 
    margin: 0px; 
    font-variant: small-caps; 
    font-size: 1.5em; 
    color: #fdfdfa; 
} 

#displayOption-invert { 
    text-align: center; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    border: .88px #efdaae; 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    /*-moz-border-radius: 10px; 
    -webkit-border-radius: 10px;*/ 
    width: 258px; 
    background-color: #efdaae; 
    padding: .1px; 
    margin: 0px; 
    font-variant: small-caps; 
    font-size: 1.5em; 
    color: #030303; 
} 

#onoffSwitch { 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    border: 1px solid #945e38; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    padding: 7px 10px; 
    line-height: normal; 
    text-align: left; 
    padding-bottom: 18px; 
    color: #000000; 
} 


#onoffSwitch-invert { 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    border: 1px solid #efdaae; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    padding: 7px 10px; 
    line-height: normal; 
    text-align: left; 
    padding-bottom: 18px; 
    color: #ffffff; 
} 

/*** unordered list ***/ 
#btn, #btn ul { 
    padding: 0px; 
    margin: 0px; 
    list-style-type: none; /*bullet removel*/ 
    list-style: none; /*bullet removel*/ 
    text-decoration: none; /*bullet removel*/ 
} 

.display-title { 
    display: inline-block; 
} 

/*** text ***/ 
#spoilerSwitch, #daynightVision { 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    line-height: normal; 
    color: #000000; 
    text-align: left; 
    margin-bottom: 10px; 
} 

#spoilerSwitch-invert, #daynightVision-invert { 
    font-family: "Comic Sans MS", cursive, sans-serif; 
    line-height: normal; 
    color: #FFFFFF; 
    text-align: left; 
    margin-bottom: 10px; 
} 

/*** toggle button ***/ 
.onoffswitch { 
    position: relative; 
    width: 50px; 
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none; 
} 

.onoffswitch-checkbox { 
    display: none; 
} 

.onoffswitch-label, .onoffswitchInvert-label { 
    display: block; 
    overflow: hidden; 
    cursor: pointer; 
    border: 2px solid #999999; 
    border-radius: 0px; 
} 

.onoffswitch-inner, .offswitchInvert-inner { 
    display: block; 
    width: 200%; 
    margin-left: 100%; 
    transition: margin 0.3s ease-in 0s; 
} 

.onoffswitch-inner:before, .onoffswitch-inner:after { 
    display: block; 
    float: left; 
    width: 50%; 
    height: 30px; 
    padding: 0; 
    line-height: 26px; 
    font-size: 14px; 
    color: white; 
    font-family: Trebuchet, Arial, sans-serif; 
    font-weight: bold; 
    box-sizing: border-box; 
    border: 2px solid transparent; 
    background-clip: padding-box; 
} 

.onoffswitch-inner:before { 
    content: ""; 
    padding-left: 10px; 
    background-color: #2E8DEF; 
    color: #FFFFFF; 
} 

.onoffswitch-inner:after { 
    content: ""; 
    padding-right: 10px; 
    background-color: #CCCCCC; color: #333333; 
    text-align: right; 
} 

.onoffswitch-switch { 
    display: block; 
    width: 25px; 
    margin: 0px; 
    background: #000000; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 65px; 
    transition: all 0.3s ease-in 0s; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
} 

Answer 1

寻找在谷歌浏览器元素浏览器，你有这个类搞砸

.onoffswitch-inner:before, .onoffswitch-inner:after { 

你不应该使用“宽度：x％”。您应该将％更改为某个单位，如px。