如何将标签和输入右对齐

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 />。然后将input和label的css设置为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。

基本上，我使用了一个列，并将每个项目组合(标签和复选框(放在一个新行中。

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