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:

<fieldsetid="payment_method"><legend>Payment Method</legend><divclass="fieldgroup"><inputtype="radio"name="payment_method"value="Bill Me"><labelfor= "payment1">BillMe
</label></div><divclass="fieldgroup"><inputtype="radio"name="payment_method"value="Bill Me"><labelfor= "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-listid="radioGrupo"radio-group [(ngModel)]="tipoBusca"><ion-item><ion-label>NAME</ion-label><ion-radiovalue="1"checked></ion-radio></ion-item><ion-item><ion-label>COMERCIAL</ion-label><ion-radiovalue="2"></ion-radio></ion-item><ion-item><ion-label>CODE</ion-label><ion-radiovalue="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/