Question

我已经查看了关于同一主题的所有其他问题，但似乎没有任何问题。考虑代码 -

.River {
  height: 100px;
  width: 100%;
  margin-top: 30px;
  background-color: #00BFFF
}

.switch {
  position: relative;
  width: 60px;
  height: 34px;
  float: left;
  text-align: center;
}

<div class="River">
  <p>River</p>
</div>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

我正在尝试将开关直接放在River标签的前面。这看起来像

河流 - '开关'

关于如何实现这一目标的任何想法

Answer 1

我认为你有无用的标签和css ...简单地删除所有css for switch复选框并将其全部包装在表单控件div上

＆＃13;

.River {
  height: 100px;
  width: 100%;
  margin-top: 30px;
  background-color: #00BFFF
}

＆＃13;

<div class="River">
   <div class="form-control">
       <label for="switch-checkbox" class="switch">River</label>
       <input id="switch-checkbox" type="checkbox">
   </div>
</div>

＆＃13;

Answer 2

当然，复选框不会与River并排，因为您将width:100%设置为.River。为了工作我改变了你的html

您有多种解决方案（我不知道您是如何搜索的，并且没有找到解决方案）

由于您已添加了float：left yo switch，请将float:left添加到.River p。请参阅代码段

＆＃13;

.River {
  height: 100px;
  width: 100%;
  margin-top: 30px;
  background-color: #00BFFF
}

.switch {
  position: relative;
  width: 60px;
  height: 34px;
  float: left;
  text-align: center;
}

.River p {
  float: left;
  margin:0;
}

＆＃13;

<div class="River">
  <p>River</p>



  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</div>

＆＃13;

display:inline

inline-block

p

switch

＆＃13;

.River {
  height: 100px;
  width: 100%;
  margin-top: 30px;
  background-color: #00BFFF
}

.switch {
  position: relative;
  width: 60px;
  height: 34px;
  display:inline;
  text-align: center;
}

.River p {
  margin:0;
  display:inline;
}

＆＃13;

<div class="River">
  <p>River</p>



  <label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
  </label>
</div>

＆＃13;

其他方式：使用flexbox，网格，表等。

Answer 3

这是代码

.River {
display: inline-block;
vertical-align: middle;
}
.switch {
 display: inline-block;
 vertical-align: middle;
 margin-left: 10px;
}

.river-wrap {
background-color: #00BFFF;
overflow: hidden;
padding: 15px;
}

<div class="river-wrap">
  <div class="River">
  <p>River</p>
  </div>
  <label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
  </label>
</div>

Answer 4

检查，

.River {
  height: 100px;
  width: 100%;
  margin-top: 30px;
  background-color: #00BFFF;
}

.switch {
  position: relative;
  width: 60px;
  height: 34px;
  float: left;
  text-align: center;
  margin-top: 18px;
}

.River p {
  display: inline-block;
  float: left;
}

<div class="River">
  <p>River</p>
  <label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>

Answer 5

有人已在评论中提到过：

自＆＃34; River＆＃34;是一个标签，它应该在您的label标签内。所以，如果你把它放在.River周围label，你可能得不到你想要的东西（根据你的规则猜测），但你得到你想要的复选框，可以从那里。

＆＃13;

.River {
  height: 100px;
  width: 100%;
  margin-top: 30px;
  background-color: #00BFFF
}

.switch {
  position: relative;
  width: 60px;
  height: 34px;
  float: left;
  text-align: center;
}

＆＃13;

<div class="River">

<label class="switch">River
  <input type="checkbox">
  <span class="slider round"></span>
</label>
</div>

＆＃13;

CSS将两个元素彼此相邻

5 个答案: