無法對齊留給切換按鈕文本在HTML

Question

我最近看到一個視頻，創造了這個切換按鈕代碼

HTML：

<div class="display"> 
    <label class="label toggle"> 
    <input type="checkbox" class="toggle_input" /> 
    <div class="toggle-control"></div> 
    </label> 
</div> 

CSS：

html { 
    font-size: 16px; 
    box-sizing: border-box; 
} 

body { 
    font-size: 1em; 
    font-family: arial, sans-serif; 
} 

.display { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
      transform: translate(-50%, -50%); 
} 

.toggle .toggle-control { 
    -webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99); 
      transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99); 
    width: 4em; 
    height: 2em; 
    display: block; 
    border: 2px solid #8E8E93; 
    border-radius: 2em; 
    background-color: rgba(0, 0, 0, 0.06); 
    position: relative; 
} 
.toggle .toggle-control:after { 
    -webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99); 
      transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99); 
    content: ""; 
    width: 2em; 
    height: 2em; 
    display: block; 
    background-color: #fff; 
    border-radius: 50%; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 2px rgba(0, 0, 0, 0.4); 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.toggle input { 
    display: none; 
} 
.toggle input:checked + .toggle-control { 
    border-color: #4cd964; 
    background-color: #4cd964; 
} 
.toggle input:checked + .toggle-control:after { 
    left: 2em; 
} 

現在我想添加一個左對齊切換按鈕的文本，但我無法做到這一點。

預期輸出： （有的文本）（切換按鈕）

請幫

Answer 1

更改div的display:block到display:inline-block（這會導致它在自己的行會顯示）。
在這個例子中我添加了vertical-align:middle，但這取決於你如何使控件排列！

html { 
 
    font-size: 16px; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-size: 1em; 
 
    font-family: 'Arial', sans-serif; 
 
} 
 

 
.display { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
     -ms-transform: translate(-50%, -50%); 
 
      transform: translate(-50%, -50%); 
 
} 
 

 
.toggle .toggle-control { 
 
    -webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99); 
 
      transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99); 
 
    width: 4em; 
 
    height: 2em; 
 
    display: inline-block; /* changed */ 
 
    border: 2px solid #8E8E93; 
 
    border-radius: 2em; 
 
    background-color: rgba(0, 0, 0, 0.06); 
 
    position: relative; 
 
    vertical-align:middle; /* new; can be removed if desired */ 
 
} 
 
.toggle .toggle-control:after { 
 
    -webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99); 
 
      transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99); 
 
    content: ""; 
 
    width: 2em; 
 
    height: 2em; 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 2px rgba(0, 0, 0, 0.4); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.toggle input { 
 
    display: none; 
 
} 
 
.toggle input:checked + .toggle-control { 
 
    border-color: #4cd964; 
 
    background-color: #4cd964; 
 
} 
 
.toggle input:checked + .toggle-control:after { 
 
    left: 2em; 
 
}

<div class="display"> 
 
    <label class="label toggle"> 
 
    Some text 
 
    <input type="checkbox" class="toggle_input" /> 
 
    <div class="toggle-control"></div> 
 
    </label> 
 
</div>