どのようにこれらのトグルスイッチを並べて配置するのですか？

Question

私は2つの方法でフォーマットしたいトグルスイッチが2つあります。私はこれと戦っているだけでそれを得ることはできません。ありがとうございました！私がされている取得しようとしている

2つの形式...

スイッチ1（0）スイッチ2（0）

と

（これはちょうど探しています。accross正しく来ていませんラベルの下にセンタリングするスイッチ。

スイッチ1スイッチ2

（0）（0）

JSFIDDLE

HTML：

Switch 1 
<div class="onoffswitch"> 
    <input type="checkbox" name="centerLockSwitch" class="onoffswitch-checkbox" id="centerLockSwitch" value="centerLockSwitch" checked> 
    <label class="onoffswitch-label" for="centerLockSwitch"> 
    <span class="onoffswitch-inner"></span> 
    <span class="onoffswitch-switch"></span> 
    </label> 
</div> 
<p> 
</p> 
Switch 2 
<div class="keepScreenOn"> 
    <input type="checkbox" name="keepScreenOn" class="keepScreenOn-checkbox" id="keepScreenOn" value="keepScreenOn" checked> 
    <label class="keepScreenOn-label" for="keepScreenOn"> 
    <span class="keepScreenOn-inner"></span> 
    <span class="keepScreenOn-switch"></span> 
    </label> 
</div> 

CSS：

.onoffswitch { 
    position: relative; 
    width: 71px; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 

.onoffswitch-checkbox { 
    display: none; 
} 

.onoffswitch-label { 
    display: block; 
    overflow: hidden; 
    cursor: pointer; 
    border: 2px solid #999999; 
    border-radius: 20px; 
} 

.onoffswitch-inner { 
    display: block; 
    width: 200%; 
    margin-left: -100%; 
    transition: margin 0.3s ease-in 0s; 
} 

.onoffswitch-inner:before, 
.onoffswitch-inner:after { 
    display: block; 
    float: left; 
    width: 50%; 
    height: 24px; 
    padding: 0; 
    line-height: 24px; 
    font-size: 14px; 
    color: white; 
    font-family: Trebuchet, Arial, sans-serif; 
    font-weight: bold; 
    box-sizing: border-box; 
} 

.onoffswitch-inner:before { 
    content: "ON"; 
    padding-left: 10px; 
    background-color: #34A7C1; 
    color: #FFFFFF; 
} 

.onoffswitch-inner:after { 
    content: "OFF"; 
    padding-right: 10px; 
    background-color: #EEEEEE; 
    color: #999999; 
    text-align: right; 
} 

.onoffswitch-switch { 
    display: block; 
    width: 19px; 
    margin: 2.5px; 
    background: #FFFFFF; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 43px; 
    border: 2px solid #999999; 
    border-radius: 20px; 
    transition: all 0.3s ease-in 0s; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: 0px; 
} 

.keepScreenOn { 
    position: relative; 
    width: 71px; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 

.keepScreenOn-checkbox { 
    display: none; 
} 

.keepScreenOn-label { 
    display: block; 
    overflow: hidden; 
    cursor: pointer; 
    border: 2px solid #999999; 
    border-radius: 20px; 
} 

.keepScreenOn-inner { 
    display: block; 
    width: 200%; 
    margin-left: -100%; 
    transition: margin 0.3s ease-in 0s; 
} 

.keepScreenOn-inner:before, 
.keepScreenOn-inner:after { 
    display: block; 
    float: left; 
    width: 50%; 
    height: 24px; 
    padding: 0; 
    line-height: 24px; 
    font-size: 14px; 
    color: white; 
    font-family: Trebuchet, Arial, sans-serif; 
    font-weight: bold; 
    box-sizing: border-box; 
} 

.keepScreenOn-inner:before { 
    content: "ON"; 
    padding-left: 10px; 
    background-color: #34A7C1; 
    color: #FFFFFF; 
} 

.keepScreenOn-inner:after { 
    content: "OFF"; 
    padding-right: 10px; 
    background-color: #EEEEEE; 
    color: #999999; 
    text-align: right; 
} 

.keepScreenOn-switch { 
    display: block; 
    width: 19px; 
    margin: 2.5px; 
    background: #FFFFFF; 
    position: absolute; 
    top: 0px; 
    bottom: 0; 
    right: 43px; 
    border: 2px solid #999999; 
    border-radius: 20px; 
    transition: all 0.3s ease-in 0s; 
} 

.keepScreenOn-checkbox:checked + .keepScreenOn-label .keepScreenOn-inner { 
    margin-left: 0px; 
} 

.keepScreenOn-checkbox:checked + .keepScreenOn-label .keepScreenOn-switch { 
    right: 0px; 
} 

Answer 1

最初に指定したレイアウトは、display: inline-blockです。

MDNより：

inline-block：それは1つのインラインボックスであるかのように要素が（交換要素のような多く振る舞うであろう）を囲むコンテンツに流入するブロック要素ボックスを生成

<div class="switch-container"> 
    <div class="title"> 
    Switch 1 
    </div> 
    <div class="switch onoffswitch"> 
    ... 
    </div> 
</div> 
<div class="switch-container"> 
    <div class="title"> 
    Switch 2 
    </div> 
    <div class="switch keepScreenOn"> 
    ... 
    </div> 
</div> 

をそしてdisplayを適用します。

のは、いくつか含むdiv要素を追加してみましょう値を適切：第2のレイアウトについては

.switch-container, 
.title, 
.switch { 
    display: inline-block; 
} 

JS Fiddle example for layout #1

---

、もう少し工夫が必要です。

私たちは、同じマークアップを維持することができます。しかし、現在、コンテナのchildren要素はブロックレベルです（コンテナの幅全体を占有します）。コンテナは、横に並べて並んでいるため、ブロックレベルではありません。

固定幅を追加するだけでなく、inline-blockではなくinline-flexを適用することができます。これは、フレックスボックスのalign-items: centerを使ってアイテムを水平に中央に置くことが容易になるためです。フレックスボックスhereについてもっと読む。

.switch-container { 
    width: 100px; 
    display: inline-flex; 
    flex-flow: column; 
    align-items: center; 
} 

JS Fiddle example for layout #2

Answer 2

<html> 
<head> 
<style> 
#main{ 
width: 100%; 
height: 600px; 
} 

.wrap1{ 
width:50%; 
height: 100%; 
float: left; 
} 

.wrap2{ 
width:50%; 
height: 100%; 
float:left; 
} 
</style> 
</head> 
<body> 


<div id="main"> 
<div class="wrap1"> Put YOUR BUTTON ONE HERE</div> 
<div class="wrap2">Put YOUR BUTTON TWO HERE</div> 
</div> 


</body> 
</html> 

は、このような何かを試してみてくださいラッパーで各ボタンを配置し、あなたがラッパー内のスタイルができます。