CSS将两个元素彼此对齐

Question

I have looked at all the other questions on the same topic but none seem to be working. Consider the code-

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

I am trying to position the switch directly in front of the River label. This would look something like

RIVER - 'SWITCH'

Any ideas on how I can achieve this

Answer 1

I think u have useless tags and css... Make it simple deleting all the css for switch checkbox and wrap it all on form control 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

Of course the checkbox won't stay side-by-side with the River because you set width:100% to .River . I changed your html a little bit for that to work

You have multiple solutions for this ( i don't know how you searched and didn't find a solution )

1. Since you already added float:left yo switch , add float:left to .River p . See snippet

 .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 or inline-block on p and on switch

 .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. Other ways : using flexbox, grids, tables etc.

Answer 3

Here is code

 .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

Check That,

 .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

Someone already mentioned it in a comment:

Since "River" is a label, it should be inside your label tag. So, if you put it there and wrap .River around the label , you might not get exactly what you want (guessing based on your rules), but you get the checkbox where you want and can work from there.

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