CSS將兩個元素彼此對齊

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標簽的前面。 這看起來像

河-'SWITCH'

關於如何實現這一目標的任何想法

Answer 1

我認為您有無用的標簽和CSS ...簡化刪除所有CSS開關復選框並將其全部包裝在窗體控件div上的過程

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

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

Answer 2

當然，由於您將width:100%設置為.River因此復選框不會與River並排放置。 我對您的html做了一些修改

您為此有多種解決方案（我不知道您如何搜索，也找不到解決方案）

1. 由於您已經添加了float：left yo switch ，因此請將float:left添加到.River p 。 見片段

 .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; } 

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

2. display:inline p和switch上的display:inline或inline-block

 .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; } 

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

3. 其他方式：使用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

有人已經在評論中提到了它：

由於“河流”是一個標簽，因此它應該在label標簽內。 因此，如果將它放在那里並將.River包裹在label周圍，​​則可能無法完全獲得所需的內容（根據規則進行猜測），但是可以在所需的位置找到該復選框，並且可以從那里開始工作。

 .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"> <label class="switch">River <input type="checkbox"> <span class="slider round"></span> </label> </div>