Radio Buttons Horizontal Alignment

How do I get these two radio buttons to horizontally align? No matter what I try they keep vertically aligned or all over the place. As of now they are vertically aligned but i nee

Solution 1:

Your css should be for Fieldgroup, not input type. Like so:

<fieldset id="payment_method">
<legend>Payment Method</legend>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment1">BillMe
</label>
</div>
<div class="fieldgroup">
<input type="radio" name="payment_method"value="Bill Me"><label for= "payment2">Credit   Card</label>
</div>
</fieldset>


.fieldgroup{
   float: left;
   width: auto;
   margin-left: 3em;
}

Solution 2:

Try display: inline; within your CSS.

Solution 3:

your css:

 #radioGrupo{
        display: flex;
 }

your html:

<ion-list id="radioGrupo" radio-group [(ngModel)]="tipoBusca">
      <ion-item>
        <ion-label>NAME</ion-label>
        <ion-radio value="1" checked></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>COMERCIAL</ion-label>
        <ion-radio value="2"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>CODE</ion-label>
        <ion-radio value="3"></ion-radio>
      </ion-item>
</ion-list>

Using flexbox the Display property shows items horizontally

More information: https://css-tricks.com/snippets/css/a-guide-to-flexbox/