0
現在、私はサイモンゲームのクローンを構築しており、私は少し近代化したいと考えていました。トグルスイッチcss3は左から右に反応します
とにかく、私はこのウェブが応答しようとしておりますので、私は幅のコンテナ（ラベル）を作った（http://callmenick.com/post/css-toggle-switch-examples）
ただしのみCSS3でトグルスイッチを作成する方法についてのブログを見つけることができました：100％。
トグルスイッチ自体を任意の幅のビューポートでコンテナの端に向かって移動させる方法がわかりません。
body {
background: skyblue;
font-family: 'Righteous', cursive;
box-sizing: border-box; }
.container {
width: 100%;
display: flex;
flex-wrap: wrap; }
.game {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 70vh;
margin-top: 10px; }
.button {
position: relative;
display: block;
height: 50%;
width: 50%;
margin-bottom: 1px; }
#green {
background: #39d565;
border-top-left-radius: 25%;
box-shadow: 0 6px 0 #0d934b;
bottom: 6px;
transition: all 0.1s linear; }
#green:active {
bottom: 0px;
box-shadow: 0px 0px 0px #0d934b; }
#red {
background: #d23a51;
border-top-right-radius: 25%;
box-shadow: 0 6px 0 #711515;
bottom: 6px;
transition: all 0.1s linear; }
#red:active {
bottom: 0px;
box-shadow: 0px 0px 0px #711515; }
#blue {
background: #09f;
border-bottom-left-radius: 25%;
box-shadow: 0 6px 0 #06c;
bottom: 6px;
transition: all 0.1s linear; }
#blue:active {
bottom: 0px;
box-shadow: 0px 0px 0px #06c; }
#yellow {
background: #FD9A01;
border-bottom-right-radius: 25%;
box-shadow: 0 6px 0 #916828;
bottom: 6px;
transition: all 0.1s linear; }
#yellow:active {
bottom: 0px;
box-shadow: 0px 0px 0px #916828; }
.score {
width: 100%;
height: 10vh;
text-align: center;
color: #FFF;
text-shadow: 1px 3px 2px black; }
.control-panel {
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
height: 15vh;
background: #aaaaaa;
border-radius: 10px; }
.control-panel #on-off-btn {
width: 33.3333%; }
.control-panel #level {
background: orange;
width: 33.3333%; }
.control-panel #start {
background: purple;
width: 33.3333%; }
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden; }
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none; }
input.cmn-toggle-round + label {
padding: 2px;
max-width: 90%;
height: 35px;
background-color: #dddddd;
border-radius: 60px;
margin-top: 9px;
margin-left: 5px; }
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: ""; }
input.cmn-toggle-round + label:before {
right: 1px;
background-color: white;
border-radius: 60px;
transition: background 0.4s; }
input.cmn-toggle-round + label:after {
width: 38px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s; }
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196; }
input.cmn-toggle-round:checked + label:after {
margin-left: 20px; }
@media screen and (min-width: 426px) {
.container {
width: 426px;
margin-left: auto;
margin-right: auto; } }<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" charset="utf-8"></script>
<title>Simon Game FCC</title>
</head>
<body>
<div class="container">
<div class="game">
<div id="green" class="button"></div>
<div id="red" class="button"></div>
<div id="blue" class="button"></div>
<div id="yellow" class="button"></div>
</div>
<div class="score">
<h2>Score: 0 </h2>
</div>
<div class="control-panel">
<div id="on-off-btn">
<input id="cmn-toggle-1"type="checkbox" class="cmn-toggle cmn-toggle-round">
<label for="cmn-toggle-1"></label>
<p>Off/On</p>
</div>
<div id="level"></div>
<div id="start"></div>
</div>
</div>
</body>
</html>
トグル自体がコンテナ – Alejandro
と重なり、どのビューポートでも正しく動作するように見えます。 –
20pxで不完全なトグルになるので％or pxを試しましたか？ –