我最近看了一个视频并创建了这个切换按钮代码
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;
}
现在我想添加一个与切换按钮左对齐的文本,但我做不到。
预期输出: (一些文本)(切换按钮)
请帮忙
最佳答案
将 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>
关于html - 无法将文本左对齐到 html 中的切换按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32810537/