文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >按钮在html/css中的对齐方式

问按钮在html/css中的对齐方式
EN

Stack Overflow用户
提问于 2021-02-27 02:00:37
回答 3查看 34关注 0票数 0

我有以下代码：

​

代码语言：javascript
运行
复制
    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);
});
代码语言：javascript
运行
复制
*, *: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;
}
代码语言：javascript
运行
复制
<!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?行下面对齐的吗？我不希望这样，相反，按钮应该在文本旁边，而不是在它下面。

预期输出

切换按钮应该在Want To Switch Website View?文本旁边。表示按钮应该出现在文本之后，但在文本的旁边。

预期输出：enter image description here

jquery
css
animation
javascript
html
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-02-27 02:08:12

​

代码语言：javascript
运行
复制
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);
});
代码语言：javascript
运行
复制
*, *: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;
}
代码语言：javascript
运行
复制
<!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>

​

票数 1
EN

Stack Overflow用户

发布于 2021-02-27 02:09:15

将此代码添加到您的CSS-Code：

代码语言：javascript
运行
复制
.model-7 {
  float: right;
}

如果你想垂直对齐，那么把这个添加到你的CSS-Code中：

代码语言：javascript
运行
复制
.exponea-count3 {
  display: flex;
  align-items: center;
}
票数 0
EN

Stack Overflow用户

发布于 2021-02-27 02:16:05

您需要将文本移动到子div，以便文本和切换按钮是一个div中的两个独立元素。然后将父div显示设置为'flex‘。我希望我能帮上忙:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66390711

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档