将复选框与标签左侧对齐

Question

我有一个带有连锁反应的复选框。下面的代码首先显示标签文本，然后显示复选框我想先显示复选框，然后显示标签文本。整个div有时会扩大和缩小，<style>@keyframes ripple {    0% {        transform: scale(0,0);        opacity: 1    }    20% {        transform: scale(25,25);        opacity: 1    }    to {        opacity: 0;        transform: scale(40,40)    }}#onoff+label {    position: relative;    display: inline-block;    padding-right: 10px}#onoff {    position: absolute;    left: -9999px}#onoff+label::after {    content: '';    border: 2px solid rgba(0,0,0,.5);    border-radius: 2px;    position: absolute;    top: 50%;    right: -40px;    transform: translate(-20px,-50%);    box-sizing: border-box;    width: 20px;    height: 20px;    transition: background-color 1s;    background-position: -2px -1px;    background-color: rgba(255,0,0,.4)}#onoff:checked+label::after {    border: 2px solid #0f9d58;    background-color: rgba(15,157,88,.7);    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)}#onoff:disabled+label::after {    border: 2px solid rgba(0,0,0,.1);    background-color: rgba(0,0,0,.05);    background-image: none}#onoff+label::before {    content: '';    border-radius: 50%;    background-color: rgba(0,0,0,.1);    position: absolute;    box-sizing: border-box;    top: 50%;    right: -10px;    transform: translate(-50%,-50%) scale(0);    width: 1.8px;    height: 1.8px}#onoff:focus+label::before {    animation: ripple 1s ease-out}</style><div align="left" class="onoffdiv"><input id="onoff" type="checkbox" style="display:table-column"/><label for="onoff" style="margin-right: 30px;" class="lbl gray">Turn on/off</label><br/></div>

Answer 1

您可以使用以下代码来做到这一点

#onoff+label {

    margin-left: 30px;

    position: relative;

}

#onoff+label::after {

    left: -10px;

    right: auto;

}

#onoff+label::before {

    left: 0;

    right: auto;

}

<style>

@keyframes ripple {

    0% {

        transform: scale(0,0);

        opacity: 1

    }

    20% {

        transform: scale(25,25);

        opacity: 1

    }

    to {

        opacity: 0;

        transform: scale(40,40)

    }

}

#onoff+label {

    position: relative;

    display: inline-block;

    padding-right: 10px

}

#onoff {

    position: absolute;

    left: -9999px

}

#onoff+label::after {

    content: '';

    border: 2px solid rgba(0,0,0,.5);

    border-radius: 2px;

    position: absolute;

    top: 50%;

    right: -40px;

    transform: translate(-20px,-50%);

    box-sizing: border-box;

    width: 20px;

    height: 20px;

    transition: background-color 1s;

    background-position: -2px -1px;

    background-color: rgba(255,0,0,.4)

}

#onoff:checked+label::after {

    border: 2px solid #0f9d58;

    background-color: rgba(15,157,88,.7);

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)

}

#onoff:disabled+label::after {

    border: 2px solid rgba(0,0,0,.1);

    background-color: rgba(0,0,0,.05);

    background-image: none

}

#onoff+label::before {

    content: '';

    border-radius: 50%;

    background-color: rgba(0,0,0,.1);

    position: absolute;

    box-sizing: border-box;

    top: 50%;

    right: -10px;

    transform: translate(-50%,-50%) scale(0);

    width: 1.8px;

    height: 1.8px

}

#onoff:focus+label::before {

    animation: ripple 1s ease-out

}

#onoff+label {

margin-left: 30px;

position: relative;

}

#onoff+label::after {

left: -10px;

right: auto;

}

#onoff+label::before {

left: 0;

right: auto;

}

</style>

<div align="left" class="onoffdiv">

<input id="onoff" type="checkbox" style="display:table-column"/>

<label for="onoff" class="lbl gray">Turn on/off</label>

<br/>

</div>