html - 对齐切换按钮并使其看起来像一个

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

在 Google Chrome 的 Element 浏览器中查看，你把这个类弄乱了

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

您不应该使用“width: x%”。您应该将 % 更改为某个单位，例如 px。