如何將標簽和輸入對齊到右側

Question

我怎樣才能將標簽和輸入向右對齊，然后所有這些都出現在同一行

 .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

要將它們放在同一行中，我將從您的代碼中刪除<br />開始。 然后將 css 設置為輸入，並將 label 設置為inline-block ，例如：

 .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

要使所有輸入內聯，只需刪除所有<br />標簽。

例子：

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

代碼筆： https://codepen.io/manaskhandelwal1/pen/jOMeqex

Answer 3

我理解您的問題，您希望它們仍然彼此下方但與右側對齊。 所以我使用 flexbox 而不是硬中斷做了一個解決方案。 我評論了我進行更改的代碼以及原因，html 和 css。

基本上我使用了一個列並將每個項目組合（標簽和復選框）放在一個新的行 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>