html - 如何并排放置这些拨动开关？

Question

我有 2 个切换开关，我想以两种方式格式化。我已经为此而战，只是无法得到它。谢谢!

我尝试获取的两种格式是...

开关 1( 0) 开关 2( 0)

和

(这不是正确的。只是寻找在标签下方居中的开关。

开关 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: The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

让我们添加一些包含 div:

<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>

然后适本地应用显示值:

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

JS Fiddle example for layout #1

---

对于第二个布局，需要稍微修改一下:

我们可以保持标记不变。然而，现在，容器的子元素是 block 级的(它们占据了容器的整个宽度)。容器不是 block 级的，因为它们水平并排放置。

除了添加固定宽度外，我解决这个问题的方法是应用 inline-flex 而不是 inline-block，因为它更容易水平使用 flexbox 的 align-items: center 将元素居中。阅读更多有关 flexbox 的信息 here .

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

JS Fiddle example for layout #2