Question

我有2个拨动开关我想以两种方式进行格式化。我已经打过这个但是无法得到它。谢谢！

我试图获得的两种格式是......

Switch1（0）Switch2（0）

和

（这不是正确的。只是寻找切换位于标签下方的中心。

Switch1 Switch2

（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

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

尝试这样的事情，将每个按钮放在包装器中，然后你可以在包装器内设置样式。

Answer 2

对于您指定的第一个布局，display: inline-block就是您要找的。

来自MDN：

inline-block：该元素生成一个块元素框，该框元素框将与周围的内容一起流动，就好像它是一个单独的内联框（行为很像被替换的元素）

让我们添加一些包含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>

然后适当地应用display值：

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

JS Fiddle example for layout #1

对于第二种布局，需要稍微修补一下：

我们可以保持标记相同。但是，现在，容器＆＃39;子元素是块级别（它们占据容器的整个宽度）。容器不是块状的，因为它们彼此水平并排放置。

除了添加固定宽度之外，我修复此问题的方法是应用inline-flex而不是inline-block，因为它可以更轻松地使用flexbox＆＃39; {{{{{{ {1}}。阅读有关flexbox here的更多信息。

align-items: center

JS Fiddle example for layout #2

如何将这些切换开关并排放置？

2 个答案: