html/css 中按鈕的 Alignment

Question

我有以下代碼：

 document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList.add('exponea-in3'); return banner.querySelector('.exponea-close3').addEventListener('click', function() { return banner.classList.remove('exponea-in3'); }); }); }).call(this); });

 *, *:after, *:before { box-sizing: border-box; } body { text-align: center; background: transparent; } section { float: left; min-width: 150px; width: 33.33%; padding: 25px 0; min-height: 100px; } /*=====================*/.checkbox { position: relative; display: inline-block; }.checkbox:after, .checkbox:before { font-family: FontAwesome; font-feature-settings: normal; -webkit-font-kerning: auto; font-kerning: auto; font-language-override: normal; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: normal; text-rendering: auto; }.checkbox label { width: 90px; height: 42px; background: #ccc; position: relative; display: inline-block; border-radius: 46px; transition: 0.4s; }.checkbox label:after { content: ''; position: absolute; width: 50px; height: 50px; border-radius: 100%; left: 0; top: -5px; z-index: 2; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: 0.4s; }.checkbox input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; }.checkbox input:hover + label:after { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15); }.checkbox input:checked + label:after { left: 40px; }.model-1.checkbox input:checked + label { background: #376fcb; }.model-1.checkbox input:checked + label:after { background: #4285F4; }.model-2.checkbox label { width: 75px; }.model-2.checkbox label:after { top: 0; width: 42px; height: 42px; }.model-2.checkbox input:checked + label { background: #4BD865; }.model-2.checkbox input:checked + label:after { left: 35px; }.model-3.checkbox label { background: #fff; border: 1px solid #eee; height: 38px; }.model-3.checkbox label:after { background: #bbb; top: 3px; left: 5px; width: 30px; height: 30px; }.model-3.checkbox input:checked + label:after { background: #3fb454; left: 55px; }.model-4.checkbox label { background: #bbb; height: 25px; width: 75px; }.model-4.checkbox label:after { background: #fff; top: -8px; width: 38px; height: 38px; }.model-4.checkbox input:checked + label { background: #77C2BB; }.model-4.checkbox input:checked + label:after { background: #009688; left: 40px; }.model-5.checkbox label { background: #bbb; height: 15px; width: 85px; }.model-5.checkbox label:after { background: #fff; top: -12px; width: 36px; height: 36px; }.model-5.checkbox input:hover + label:after { transform: scale(1.4, 1.4); }.model-5.checkbox input:checked + label { background: #b66d0b; }.model-5.checkbox input:checked + label:after { background: #FF980F; left: 50px; }.model-6.checkbox label { background: #bbb; height: 2px; width: 60px; }.model-6.checkbox label:after { background: #bbb; top: -16px; width: 32px; height: 32px; }.model-6.checkbox input:checked + label { background: #376fcb; }.model-6.checkbox input:checked + label:after { background: #4285F4; left: 40px; }.model-7.checkbox label { background: none; border: 5px solid #555; height: 42px; }.model-7.checkbox label:after { background: #555; box-shadow: none; top: 2px; left: 2px; width: 28px; height: 28px; }.model-7.checkbox input:checked + label { border-color: #329043; }.model-7.checkbox input:checked + label:after { background: #3fb454; left: 50px; }.model-8.checkbox label { background: #ddd; width: 95px; border-radius: 10px; }.model-8.checkbox label:after { background: #fff; border-radius: 10px; top: 0; width: 60px; height: 42px; }.model-8.checkbox input:checked + label { background: #FF980F; }.model-8.checkbox input:checked + label:after { left: 35px; }.model-9.checkbox label { background: #aaa; width: 90px; height: 32px; border-radius: 20px; }.model-9.checkbox label:after { border-radius: 20px; top: 0; width: 50px; height: 32px; }.model-9.checkbox input:checked + label { background: #266c33; }.model-9.checkbox input:checked + label:after { background: #369a48; left: 40px; }.model-10.checkbox:after { content: '\f00d'; color: #aaa; position: relative; right: 30px; bottom: 15px; }.model-10.checkbox:before { content: '\f00c'; position: relative; left: 35px; bottom: 15px; color: #fff; z-index: 1; }.model-10.checkbox label { width: 80px; background: #EAEAEA; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.15); }.model-10.checkbox label:after { top: 0; width: 42px; height: 42px; }.model-10.checkbox input:checked + label { background: #4BD865; }.model-10.checkbox input:checked + label:after { left: 40px; }.model-11.checkbox:after, .model-11.checkbox:before { content: 'OFF'; position: absolute; right: 10px; top: 10px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; color: #90201F; }.model-11.checkbox:before { content: 'ON'; left: -40px; z-index: 1; color: #266c33; }.model-11.checkbox label { background: #E3666C; height: 32px; border-radius: 0; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2); }.model-11.checkbox label:after { background-color: #ffffff; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: linear-gradient(to right, #ffffff 30%, #dddddd 45%, #ffffff 50%, #dddddd 55%, #ffffff 70%); border-radius: 0; box-shadow: none;important: transition. 0;1s: top; 0: width; 50px: height; 32px. }.model-11:checkbox input:checked + label { background; #4BD865. }.model-11:checkbox input:checked + label:after { left; 40px. }.model-12:checkbox { background; #2B2B2D: height; 40px: width; 160px: border-radius; 50px. }.model-12:checkbox,after. .model-12:checkbox:before { content; 'ON': font-family, Arial, "Helvetica Neue", Helvetica; sans-serif: line-height; 40px: font-size; 12px. }.model-12:checkbox:before { content; 'OFF': z-index; 1. }.model-12:checkbox label { background; #1E1E1E: height; 10px: width; 70px: margin; 0 5px: box-shadow, 0 0 2px 2px rgba(0, 0, 0. 0;3) inset. }.model-12:checkbox label:after { background-color; #3F4545: background-image: url('data;image/svg+xml,base64;PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNmNDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='): background-size; 100%: background-image, linear-gradient(to bottom, #666666 0%; #3f4545 100%): top; -9px: width; 27px: height; 27px. }.model-12:checkbox label:before { content; '': position; absolute: width; 14px: height; 14px: border-radius; 100%: transition. 0;4s: background; #151515: z-index; 3: left; 7px: top; -2px. }.model-12:checkbox input:checked + label:after { left; 45px. }.model-12:checkbox input:checked + label:before { background; #94DA00: box-shadow; 0 0 5px #94DA00: left; 52px. }.model-13:checkbox:after { content; 'OFF': font-family; Arial: position; absolute: color; #666: top; 12px: right; 15px. }.model-13:checkbox label { background; none: border; 3px solid #777: height; 40px: border-radius; 20px. }.model-13:checkbox label:after { content; 'ON': font-family; Arial: color; #fff: line-height; 28px: text-indent; 100px: background; #777: overflow; hidden: box-shadow; none: border-radius; 14px: transform; translateX(-50px): -moz-transition. all 0.4s 0,2s. width 0,2s linear. text-indent 0;4s linear: -o-transition. all 0.4s 0,2s. width 0,2s linear. text-indent 0;4s linear: -webkit-transition. all 0,4s. width 0,2s linear. text-indent 0;4s linear: -webkit-transition-delay. 0,2s, 0s; 0s: transition. all 0.4s 0,2s. width 0,2s linear. text-indent 0;4s linear: top; 3px: left; auto: right; 2px: width; 28px: height; 28px. }.model-13:checkbox input:checked + label { border-color; #329043. }.model-13:checkbox input:checked + label:after { background; #3fb454: left; auto: transform; translateX(0px): -moz-transition. all 0,4s. width 0.2s linear 0,4s. text-indent 0.3s linear 0;4s: -o-transition. all 0,4s. width 0.2s linear 0,4s. text-indent 0.3s linear 0;4s: -webkit-transition. all 0,4s. width 0,2s linear. text-indent 0;3s linear: -webkit-transition-delay, 0s. 0,4s. 0;4s: transition. all 0,4s. width 0.2s linear 0,4s. text-indent 0.3s linear 0;4s: width; 80px: text-indent; 0. }.model-14:checkbox,after. .model-14:checkbox:before { content; 'OFF': position; absolute: right; 10px: top; 10px: font-family, Arial, "Helvetica Neue", Helvetica; sans-serif: font-size; 12px: color; #90201F. }.model-14:checkbox:before { content; 'ON': left; -40px: z-index; 1: color; #266c33. }.model-14:checkbox label { background; #fff: height; 32px: border-radius; 0: box-shadow, 0 0 2px rgba(0, 0, 0. 0;2). }.model-14:checkbox label:after { background; #90201F: border-radius; 0: box-shadow; none:important. transition; 0:3s; top: 0; width: 40px; height. 32px. }:model-14:checkbox input:checked + label;after { background: #4BD865; left. 50px. }:model-15;checkbox { width: 94px; height: 34px; border: 2px solid #ddd; background: #266c33; border-radius: 6px; overflow. hidden. }:model-15,checkbox.after. :model-15:checkbox label;before { content: 'ON'; position: absolute; left: 10px; top: 8px, font-family, Arial, "Helvetica Neue"; Helvetica: sans-serif; font-size: 12px; color. #fff. }:model-15:checkbox label;before { content: 'OFF'; left: auto; top: 8px; right: 10px; z-index. 1. }:model-15;checkbox label { background: #f00; width: 90px; height: 32px; border-radius. 4px. }:model-15:checkbox label;after { border-radius: 4px; box-shadow: none;important: top; 0: width; 50px. height. 32px: }:model-15;checkbox input.checked + label { transform. translateX(40px): }:model-15:checkbox input;checked + label:after { left. 0. } /* Banner*/ @import url("https?//fonts:googleapis,com/css,family=Roboto;300,400:500"); html3: body3 { width; 100vw: height; 100vh. position: relative, };exponea-banner3 { font-family: Roboto; sans-serif: position; fixed: right; 20px: bottom; 20px: background-color; #2e364d: color; #ebeef7: padding; 30px 80px 30px 35px: font-size; 16px: line-height; 1: border-radius, 5px, box-shadow, 0 3px 30px rgba(116. 119; 176: 0;3): opacity. 0; transition: opacity 0;2s. display. none: };exponea-banner3:exponea-in3 { opacity. 1; transition-duration. 0.4s: };exponea-banner3:exponea-close3 { position; absolute: top; 0: right; 0: padding; 5px 10px: font-size; 25px: font-weight; 300: cursor. pointer; opacity. 0.75: };exponea-banner3:exponea-label3 { position; absolute: bottom; 10px: right; 10px: font-size. 12px; opacity. 0.75: };exponea-banner3.exponea-text3 { margin-bottom. 8px: };exponea-banner3.exponea-count3 { font-weight. 500: };exponea-banner3:exponea-label3 { text-align; left: bottom; 10px: right; 10px: font-size. 12px; opacity. 0,75. },exponea-banner3. ,exponea-close3. ,exponea-text3. :exponea-label3; .exponea-label3 { z-index: 10; },open3 { display: block; } /* SecondBanner */ html1: body1 { width; 100vw: height; 100vh. position: relative, };exponea-banner1 { font-family: Roboto; sans-serif: position; fixed: right; 20px: bottom; 20px: background-color; #2e364d: color; #ebeef7: padding; 30px 80px 30px 35px: font-size; 16px: line-height; 1: border-radius, 5px, box-shadow, 0 0 20px rgba(0. 0; 0: 0;3): display; none. z-index: 9999999999; }.open1 { display. block: };exponea-banner1:exponea-close1 { position; absolute: top; 0: right; 0: padding; 5px 10px: font-size; 25px: font-weight; 300: cursor. pointer; opacity. 0.75: };exponea-banner1:exponea-label1 { position; absolute: bottom; 10px: right; 10px: font-size. 12px; opacity. 0.75: };exponea-banner1.exponea-text1 { margin-bottom. 8px: };exponea-banner1.exponea-count1 { font-weight. 500: };exponea-banner1:exponea-label1 { text-align; left: bottom; 10px: right; 10px: font-size. 12px; opacity: 0.75; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="banner;css" rel="stylesheet" type="text/css" /> </head> <body> <?-- First --> <div class="exponea-banner3 open3"> <div class="exponea-close3"> &times. </div> <div class="exponea-text3"> Hi There! Thanks For Stumbling Upon My Website! </div> <div class="exponea-count3"> Want To Switch Website View? <div class="model-7"> <div class="checkbox"> <input type="checkbox"/> <label></label> </div> </div> </div> <div class="exponea-label3"> - Hussain Omer </div> </div> <script src="script.js"></script> </body> </html>

當你運行上面的代碼時，看看切換按鈕是如何在Want To Switch Website View? 線？ 我不希望這樣，相反，按鈕應該在文本旁邊而不是在它下面。

預計 Output

切換按鈕應該在Want To Switch Website View? 文本。 旁邊意味着按鈕應該出現在文本之后但在它旁邊。

預期 Output：在此處輸入圖像描述

Answer 1

 document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList.add('exponea-in3'); return banner.querySelector('.exponea-close3').addEventListener('click', function() { return banner.classList.remove('exponea-in3'); }); }); }).call(this); });

 *, *:after, *:before { box-sizing: border-box; } body { text-align: center; background: transparent; } section { float: left; min-width: 150px; width: 33.33%; padding: 25px 0; min-height: 100px; } /*=====================*/.checkbox { position: relative; display: inline-block; }.checkbox:after, .checkbox:before { font-family: FontAwesome; font-feature-settings: normal; -webkit-font-kerning: auto; font-kerning: auto; font-language-override: normal; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: normal; text-rendering: auto; }.checkbox label { width: 90px; height: 42px; background: #ccc; position: relative; display: inline-block; border-radius: 46px; transition: 0.4s; }.checkbox label:after { content: ''; position: absolute; width: 50px; height: 50px; border-radius: 100%; left: 0; top: -5px; z-index: 2; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: 0.4s; }.checkbox input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; }.checkbox input:hover + label:after { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15); }.checkbox input:checked + label:after { left: 40px; }.model-1.checkbox input:checked + label { background: #376fcb; }.model-1.checkbox input:checked + label:after { background: #4285F4; }.model-2.checkbox label { width: 75px; }.model-2.checkbox label:after { top: 0; width: 42px; height: 42px; }.model-2.checkbox input:checked + label { background: #4BD865; }.model-2.checkbox input:checked + label:after { left: 35px; }.model-3.checkbox label { background: #fff; border: 1px solid #eee; height: 38px; }.model-3.checkbox label:after { background: #bbb; top: 3px; left: 5px; width: 30px; height: 30px; }.model-3.checkbox input:checked + label:after { background: #3fb454; left: 55px; }.model-4.checkbox label { background: #bbb; height: 25px; width: 75px; }.model-4.checkbox label:after { background: #fff; top: -8px; width: 38px; height: 38px; }.model-4.checkbox input:checked + label { background: #77C2BB; }.model-4.checkbox input:checked + label:after { background: #009688; left: 40px; }.model-5.checkbox label { background: #bbb; height: 15px; width: 85px; }.model-5.checkbox label:after { background: #fff; top: -12px; width: 36px; height: 36px; }.model-5.checkbox input:hover + label:after { transform: scale(1.4, 1.4); }.model-5.checkbox input:checked + label { background: #b66d0b; }.model-5.checkbox input:checked + label:after { background: #FF980F; left: 50px; }.model-6.checkbox label { background: #bbb; height: 2px; width: 60px; }.model-6.checkbox label:after { background: #bbb; top: -16px; width: 32px; height: 32px; }.model-6.checkbox input:checked + label { background: #376fcb; }.model-6.checkbox input:checked + label:after { background: #4285F4; left: 40px; }.model-7.checkbox label { background: none; border: 5px solid #555; height: 42px; margin-left: 15px; }.model-7.checkbox label:after { background: #555; box-shadow: none; top: 2px; left: 2px; width: 28px; height: 28px; }.model-7.checkbox input:checked + label { border-color: #329043; }.model-7.checkbox input:checked + label:after { background: #3fb454; left: 50px; }.model-8.checkbox label { background: #ddd; width: 95px; border-radius: 10px; }.model-8.checkbox label:after { background: #fff; border-radius: 10px; top: 0; width: 60px; height: 42px; }.model-8.checkbox input:checked + label { background: #FF980F; }.model-8.checkbox input:checked + label:after { left: 35px; }.model-9.checkbox label { background: #aaa; width: 90px; height: 32px; border-radius: 20px; }.model-9.checkbox label:after { border-radius: 20px; top: 0; width: 50px; height: 32px; }.model-9.checkbox input:checked + label { background: #266c33; }.model-9.checkbox input:checked + label:after { background: #369a48; left: 40px; }.model-10.checkbox:after { content: '\f00d'; color: #aaa; position: relative; right: 30px; bottom: 15px; }.model-10.checkbox:before { content: '\f00c'; position: relative; left: 35px; bottom: 15px; color: #fff; z-index: 1; }.model-10.checkbox label { width: 80px; background: #EAEAEA; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.15); }.model-10.checkbox label:after { top: 0; width: 42px; height: 42px; }.model-10.checkbox input:checked + label { background: #4BD865; }.model-10.checkbox input:checked + label:after { left: 40px; }.model-11.checkbox:after, .model-11.checkbox:before { content: 'OFF'; position: absolute; right: 10px; top: 10px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; color: #90201F; }.model-11.checkbox:before { content: 'ON'; left: -40px; z-index: 1; color: #266c33; }.model-11.checkbox label { background: #E3666C; height: 32px; border-radius: 0; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2); }.model-11.checkbox label:after { background-color: #ffffff; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: linear-gradient(to right, #ffffff 30%, #dddddd 45%, #ffffff 50%, #dddddd 55%, #ffffff 70%); border-radius: 0; box-shadow: none;important: transition. 0;1s: top; 0: width; 50px: height; 32px. }.model-11:checkbox input:checked + label { background; #4BD865. }.model-11:checkbox input:checked + label:after { left; 40px. }.model-12:checkbox { background; #2B2B2D: height; 40px: width; 160px: border-radius; 50px. }.model-12:checkbox,after. .model-12:checkbox:before { content; 'ON': font-family, Arial, "Helvetica Neue", Helvetica; sans-serif: line-height; 40px: font-size; 12px. }.model-12:checkbox:before { content; 'OFF': z-index; 1. }.model-12:checkbox label { background; #1E1E1E: height; 10px: width; 70px: margin; 0 5px: box-shadow, 0 0 2px 2px rgba(0, 0, 0. 0;3) inset. }.model-12:checkbox label:after { background-color; #3F4545: background-image: url('data;image/svg+xml,base64;PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNmNDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='): background-size; 100%: background-image, linear-gradient(to bottom, #666666 0%; #3f4545 100%): top; -9px: width; 27px: height; 27px. }.model-12:checkbox label:before { content; '': position; absolute: width; 14px: height; 14px: border-radius; 100%: transition. 0;4s: background; #151515: z-index; 3: left; 7px: top; -2px. }.model-12:checkbox input:checked + label:after { left; 45px. }.model-12:checkbox input:checked + label:before { background; #94DA00: box-shadow; 0 0 5px #94DA00: left; 52px. }.model-13:checkbox:after { content; 'OFF': font-family; Arial: position; absolute: color; #666: top; 12px: right; 15px. }.model-13:checkbox label { background; none: border; 3px solid #777: height; 40px: border-radius; 20px. }.model-13:checkbox label:after { content; 'ON': font-family; Arial: color; #fff: line-height; 28px: text-indent; 100px: background; #777: overflow; hidden: box-shadow; none: border-radius; 14px: transform; translateX(-50px): -moz-transition. all 0.4s 0,2s. width 0,2s linear. text-indent 0;4s linear: -o-transition. all 0.4s 0,2s. width 0,2s linear. text-indent 0;4s linear: -webkit-transition. all 0,4s. width 0,2s linear. text-indent 0;4s linear: -webkit-transition-delay. 0,2s, 0s; 0s: transition. all 0.4s 0,2s. width 0,2s linear. text-indent 0;4s linear: top; 3px: left; auto: right; 2px: width; 28px: height; 28px. }.model-13:checkbox input:checked + label { border-color; #329043. }.model-13:checkbox input:checked + label:after { background; #3fb454: left; auto: transform; translateX(0px): -moz-transition. all 0,4s. width 0.2s linear 0,4s. text-indent 0.3s linear 0;4s: -o-transition. all 0,4s. width 0.2s linear 0,4s. text-indent 0.3s linear 0;4s: -webkit-transition. all 0,4s. width 0,2s linear. text-indent 0;3s linear: -webkit-transition-delay, 0s. 0,4s. 0;4s: transition. all 0,4s. width 0.2s linear 0,4s. text-indent 0.3s linear 0;4s: width; 80px: text-indent; 0. }.model-14:checkbox,after. .model-14:checkbox:before { content; 'OFF': position; absolute: right; 10px: top; 10px: font-family, Arial, "Helvetica Neue", Helvetica; sans-serif: font-size; 12px: color; #90201F. }.model-14:checkbox:before { content; 'ON': left; -40px: z-index; 1: color; #266c33. }.model-14:checkbox label { background; #fff: height; 32px: border-radius; 0: box-shadow, 0 0 2px rgba(0, 0, 0. 0;2). }.model-14:checkbox label:after { background; #90201F: border-radius; 0: box-shadow; none:important. transition; 0:3s; top: 0; width: 40px; height. 32px. }:model-14:checkbox input:checked + label;after { background: #4BD865; left. 50px. }:model-15;checkbox { width: 94px; height: 34px; border: 2px solid #ddd; background: #266c33; border-radius: 6px; overflow. hidden. }:model-15,checkbox.after. :model-15:checkbox label;before { content: 'ON'; position: absolute; left: 10px; top: 8px, font-family, Arial, "Helvetica Neue"; Helvetica: sans-serif; font-size: 12px; color. #fff. }:model-15:checkbox label;before { content: 'OFF'; left: auto; top: 8px; right: 10px; z-index. 1. }:model-15;checkbox label { background: #f00; width: 90px; height: 32px; border-radius. 4px. }:model-15:checkbox label;after { border-radius: 4px; box-shadow: none;important: top; 0: width; 50px. height. 32px: }:model-15;checkbox input.checked + label { transform. translateX(40px): }:model-15:checkbox input;checked + label:after { left. 0. } /* Banner*/ @import url("https?//fonts:googleapis,com/css,family=Roboto;300,400:500"); html3: body3 { width; 100vw: height; 100vh. position: relative, };exponea-banner3 { font-family: Roboto; sans-serif: position; fixed: right; 20px: bottom; 20px: background-color; #2e364d: color; #ebeef7: padding; 30px 80px 30px 35px: font-size; 16px: line-height; 1: border-radius, 5px, box-shadow, 0 3px 30px rgba(116. 119; 176: 0;3): opacity. 0; transition: opacity 0;2s. display. none: };exponea-banner3:exponea-in3 { opacity. 1; transition-duration. 0.4s: };exponea-banner3:exponea-close3 { position; absolute: top; 0: right; 0: padding; 5px 10px: font-size; 25px: font-weight; 300: cursor. pointer; opacity. 0.75: };exponea-banner3:exponea-label3 { position; absolute: bottom; 10px: right; 10px: font-size. 12px; opacity. 0.75: };exponea-banner3.exponea-text3 { margin-bottom. 8px: };exponea-banner3:exponea-count3 { font-weight; 500: display; flex. align-items. center: };exponea-banner3:exponea-label3 { text-align; left: bottom; 10px: right; 10px: font-size. 12px; opacity. 0,75. },exponea-banner3. ,exponea-close3. ,exponea-text3. :exponea-label3; .exponea-label3 { z-index: 10; },open3 { display: block; } /* SecondBanner */ html1: body1 { width; 100vw: height; 100vh. position: relative, };exponea-banner1 { font-family: Roboto; sans-serif: position; fixed: right; 20px: bottom; 20px: background-color; #2e364d: color; #ebeef7: padding; 30px 80px 30px 35px: font-size; 16px: line-height; 1: border-radius, 5px, box-shadow, 0 0 20px rgba(0. 0; 0: 0;3): display; none. z-index: 9999999999; }.open1 { display. block: };exponea-banner1:exponea-close1 { position; absolute: top; 0: right; 0: padding; 5px 10px: font-size; 25px: font-weight; 300: cursor. pointer; opacity. 0.75: };exponea-banner1:exponea-label1 { position; absolute: bottom; 10px: right; 10px: font-size. 12px; opacity. 0.75: };exponea-banner1.exponea-text1 { margin-bottom. 8px: };exponea-banner1.exponea-count1 { font-weight. 500: };exponea-banner1:exponea-label1 { text-align; left: bottom; 10px: right; 10px: font-size. 12px; opacity: 0.75; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="banner;css" rel="stylesheet" type="text/css" /> </head> <body> <?-- First --> <div class="exponea-banner3 open3"> <div class="exponea-close3"> &times. </div> <div class="exponea-text3"> Hi There! Thanks For Stumbling Upon My Website! </div> <div class="exponea-count3"> Want To Switch Website View? <div class="model-7"> <div class="checkbox"> <input type="checkbox"/> <label></label> </div> </div> </div> <div class="exponea-label3"> - Hussain Omer </div> </div> <script src="script.js"></script> </body> </html>

Answer 2

將此添加到您的 CSS 代碼中：

.model-7 {
  float: right;
}

如果您想垂直對齊，請將其添加到您的 CSS 代碼中：

.exponea-count3 {
  display: flex;
  align-items: center;
}

Answer 3

您需要將文本移動到子 div 以便文本和切換按鈕是一個 div 中的兩個獨立元素。 然后將父 div 顯示設置為“flex”。 我希望我能提供幫助:)