如何将标签和输入对齐到右侧

Question

how can I align the labels & inputs to the right like that all of then appear in the same line

 .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; }

 <div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; "> <label class="title" for="">fav food</label> <label for="burger">burger</label> <input type="checkbox" id="burger"> <br> <label for="fries">fries</label> <input type="checkbox" id="fries"> <br> <label for="onionRings">onion rings</label> <input type="checkbox" id="onionRings"> <br> <label for="cackes">cakes</label> <input type="checkbox" id="cackes" > <small></small> </div>

Answer 1

To have them in the same line, I would start by removing <br /> from your code. Then set the css for input and label to be inline-block , something like:

 .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; } label, input { display: inline-block; }

 <div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; "> <label class="title" for="">fav food</label> <label for="burger">burger</label> <input type="checkbox" id="burger"> <label for="fries">fries</label> <input type="checkbox" id="fries"> <label for="onionRings">onion rings</label> <input type="checkbox" id="onionRings"> <label for="cackes">cakes</label> <input type="checkbox" id="cackes" > <small></small> </div>

Answer 2

To make all inputs inline, just remove all the <br /> tags.

Example:

<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
  <label class="title" for="">fav food</label>
  <label for="burger">burger</label>
  <input type="checkbox" id="burger">
  <label for="fries">fries</label>
  <input type="checkbox" id="fries">
  <label for="onionRings">onion rings</label>
  <input type="checkbox" id="onionRings">
  <label for="cackes">cakes</label>
  <input type="checkbox" id="cackes">
  <small></small>
</div>

Codepen: https://codepen.io/manaskhandelwal1/pen/jOMeqex

Answer 3

I understood your Question that you want them still below each other but aligned to the right side. So i made a solution using flexbox instead of the hard breaks. I commented the Code where i made changes and why, html and css.

Basically i used a colum and put each item-combination (label and checkbox)in a new row-div.

 .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; /*make item a flexbox-container*/ display: flex; /*combination of flex-direction and flex-wrap*/ flex-flow: column wrap; }.row{ /*make item a flexboc container*/ display: flex; /*flex-flow: row nowrap; this is the default value of flex, which is why you dont need it, just wanted to leave it in as a comment so you know whats happening*/ /*Align the contents on the end of each row*/ justify-content: flex-end; }

 <div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; "> <!--removed the hard breaks and added row-divs around each item combination--> <div class="row"> <label class="title" for="">fav food</label> </div> <div class="row"> <label for="burger">burger</label> <input type="checkbox" id="burger"> </div> <div class="row"> <label for="fries">fries</label> <input type="checkbox" id="fries"> </div> <div class="row"> <label for="onionRings">onion rings</label> <input type="checkbox" id="onionRings"> </div> <div class="row"> <label for="cackes">cakes</label> <input type="checkbox" id="cackes" > </div> <small></small> </div>