问题描述
我有一个简短的问题。我正在使用 CodePen.io，五分钟前我注意到一个问题，但我不知道原因是什么。我将 original code 复制到 new "pen" 中，结果并不相同。将标签与文本对齐时出现问题。 是什么问题，我该如何解决？
谢谢！
<div class="grid">
<label for="todo" class="item">
<input type="checkBox" id="todo" class="hidden"/>
<label for="todo" class="cbx">
<svg width="14px" height="12px" viewBox="0 0 14 12">
<polyline points="1 7.6 5 11 13 1"></polyline>
</svg>
</label>
<label for="todo" class="cbx-lbl">Drink more water</label>
</label>
</div>
<a class="credit" href="https://dribbble.com/shots/3792544-CheckBox-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/logo-footer-hd-a05db77841b4b27c0bf23ec1378e97c988190dfe7d26e32e1faea7269f9e001b.png" alt=""></a>
CSS（手写笔）
$main = #18CDA6
html,body
height: 100%
color: #222
body
font-family: 'Open Sans',sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
*
Box-sizing: border-Box
.grid
display: grid
height: 100vh
text-align: center
.item
align-self: center
user-select: none
//no-flicker Safari
transform: translateZ(0)
.cbx
position: relative
top: 1px
display: inline-block
width: 14px
height: 14px
margin-right: 6px
border: 1px solid #C8CCD4
border-radius: 3px
cursor: pointer
svg
position: relative
top: -1px
transform: scale(0)
fill: none
stroke-linecap: round
stroke-linejoin: round
polyline
stroke-width: 2
stroke: #18CDA6
&:before
content: ''
position: absolute
top: 50%
left: 50%
margin: -10px 0 0 -10px
width: 20px
height: 20px
border-radius: 100%
background: $main
transform: scale(0)
&:after
content: ''
position: absolute
top: 5px
left: 5px
width: 2px
height: 2px
border-radius: 2px
Box-shadow: 0 -18px 0 $main,12px -12px 0 $main,18px 0 0 $main,12px 12px 0 $main,0 18px 0 $main,-12px 12px 0 $main,-18px 0 0 $main,-12px -12px 0 $main
transform: scale(0)
.cbx-lbl
position: relative
cursor: pointer
transition: color .3s ease
&:after
content: ''
position: absolute
top: 50%
left: 0
width: 0
height: 1px
background: #9098A9
input
display: none
&:checked
+ .cbx
border-color: transparent
svg
transform: scale(1)
transition: all .4s ease
transition-delay .1s
&:before
transform: scale(1)
opacity: 0
transition: all .3s ease
&:after
transform: scale(1)
opacity: 0
transition: all .6s ease
~ .cbx-lbl
color: #9098A9
&:after
width: 100%
transition: all .4s ease
//dribbble button
.credit
position: fixed
right: 20px
bottom: 20px
transition: all .2s ease
img
width: 80px
height: 20px
&:hover
transform: scale(.95)
opacity: .8
已编译的 CSS
html,body {
height: 100%;
color: #222;
}
body {
font-family: 'Open Sans',sans-serif;
-webkit-font-smoothing: antialiased;
}
-moz-osx-font-smoothing: grayscale,* {
Box-sizing: border-Box;
}
.grid {
display: grid;
height: 100vh;
text-align: center;
}
.grid .item {
align-self: center;
user-select: none;
transform: translateZ(0);
}
.grid .item .cbx {
position: relative;
top: 1px;
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
border: 1px solid #c8ccd4;
border-radius: 3px;
cursor: pointer;
}
.grid .item .cbx svg {
position: relative;
top: -1px;
transform: scale(0);
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.grid .item .cbx svg polyline {
stroke-width: 2;
stroke: #18cda6;
}
.grid .item .cbx:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px;
width: 20px;
height: 20px;
border-radius: 100%;
background: #18cda6;
transform: scale(0);
}
.grid .item .cbx:after {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 2px;
height: 2px;
border-radius: 2px;
Box-shadow: 0 -18px 0 #18cda6,12px -12px 0 #18cda6,18px 0 0 #18cda6,12px 12px 0 #18cda6,0 18px 0 #18cda6,-12px 12px 0 #18cda6,-18px 0 0 #18cda6,-12px -12px 0 #18cda6;
transform: scale(0);
}
.grid .item .cbx-lbl {
position: relative;
cursor: pointer;
transition: color 0.3s ease;
}
.grid .item .cbx-lbl:after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 1px;
background: #9098a9;
}
.grid .item input {
display: none;
}
.grid .item input:checked + .cbx {
border-color: transparent;
}
.grid .item input:checked + .cbx svg {
transform: scale(1);
transition: all 0.4s ease;
transition-delay: 0.1s;
}
.grid .item input:checked + .cbx:before {
transform: scale(1);
opacity: 0;
transition: all 0.3s ease;
}
.grid .item input:checked + .cbx:after {
transform: scale(1);
opacity: 0;
transition: all 0.6s ease;
}
.grid .item input:checked ~ .cbx-lbl {
color: #9098a9;
}
.grid .item input:checked ~ .cbx-lbl:after {
width: 100%;
transition: all 0.4s ease;
}
.credit {
position: fixed;
right: 20px;
bottom: 20px;
transition: all 0.2s ease;
}
.credit img {
width: 80px;
height: 20px;
}
.credit:hover {
transform: scale(0.95);
opacity: 0.8;
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）