CODEWITHSUNDEEP
html
rock
rock

Reputation: 378

table radio button alignment issue

i want to make table content look like as shown in pic:-

enter image description here

but i get content alignment issue as shown in my code.

<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
   <div>
      <div class="wrapper-class">
         <span>
         <input type="radio" value="true" name="abc[status]" id="abc_status_true">
         <label for="abc_approve">Approve</label>
         </span>
         <span>
         <input type="radio" value="false" name="abc[status]" id="abc_status_false">
         <label for="abc_reject">Reject</label>
         </span>
      </div>
   </div>
   <div>
      <input type="submit">
   </div>
</form>

Upvotes: 0

Views: 69

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18973

You can change from span tag to div tag, and display Submit button on the right by display flex as

.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}


/*
.wrapper-class, .submit{
display: inline-block;
width: 100px;
}
*/
.wrapper-class{
padding: 10px;
}
.form{
display:flex;
align-items: center;
width: 100%;
height: 100%;
}
<form class="abc" id="abc" action="/" accept-charset="UTF-8" method="post">
   <div class="form">
      <div class="wrapper-class">
         <div>
         <input type="radio" value="true" name="abc[status]" id="abc_status_true">
         <label for="abc_approve">Approve</label>
         </div>
         <div>
         <input type="radio" value="false" name="abc[status]" id="abc_status_false">
         <label for="abc_reject">Reject</label>
         </div>
      </div>
   
   <div>
      <input type="submit">
   </div>
   </div>
</form>

Upvotes: 0

Related Questions