将复选框与标签左侧对齐

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 {&nbsp; &nbsp; margin-left: 30px;&nbsp; &nbsp; position: relative;}#onoff+label::after {&nbsp; &nbsp; left: -10px;&nbsp; &nbsp; right: auto;}#onoff+label::before {&nbsp; &nbsp; left: 0;&nbsp; &nbsp; right: auto;}<style>@keyframes ripple {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; transform: scale(0,0);&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1&nbsp; &nbsp; }&nbsp; &nbsp; 20% {&nbsp; &nbsp; &nbsp; &nbsp; transform: scale(25,25);&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1&nbsp; &nbsp; }&nbsp; &nbsp; to {&nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; &nbsp; transform: scale(40,40)&nbsp; &nbsp; }}#onoff+label {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; padding-right: 10px}#onoff {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: -9999px}#onoff+label::after {&nbsp; &nbsp; content: '';&nbsp; &nbsp; border: 2px solid rgba(0,0,0,.5);&nbsp; &nbsp; border-radius: 2px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; right: -40px;&nbsp; &nbsp; transform: translate(-20px,-50%);&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; width: 20px;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; transition: background-color 1s;&nbsp; &nbsp; background-position: -2px -1px;&nbsp; &nbsp; background-color: rgba(255,0,0,.4)}#onoff:checked+label::after {&nbsp; &nbsp; border: 2px solid #0f9d58;&nbsp; &nbsp; background-color: rgba(15,157,88,.7);&nbsp; &nbsp; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)}#onoff:disabled+label::after {&nbsp; &nbsp; border: 2px solid rgba(0,0,0,.1);&nbsp; &nbsp; background-color: rgba(0,0,0,.05);&nbsp; &nbsp; background-image: none}#onoff+label::before {&nbsp; &nbsp; content: '';&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; background-color: rgba(0,0,0,.1);&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; right: -10px;&nbsp; &nbsp; transform: translate(-50%,-50%) scale(0);&nbsp; &nbsp; width: 1.8px;&nbsp; &nbsp; height: 1.8px}#onoff:focus+label::before {&nbsp; &nbsp; 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>