0

How can I align the radio buttons? I would like them to be lined up on top of each other.

jsfiddle

HTML:

<form>
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male">
  <br>
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">
  <br>
  <label for="other">Other</label>
  <input type="radio" id="other" name="gender" value="other">

</form>
James Z
  • 12,209
  • 10
  • 24
  • 44
CmajorProgram
  • 155
  • 1
  • 8
  • radio buttons are already aligned vertically, how are you expecting ? – Piyush Jain Mar 29 '20 at 13:04
  • Does this answer your question? [How to align checkboxes and their labels consistently cross-browsers](https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) – Rob Mar 29 '20 at 13:29
  • is this what you want ? https://jsfiddle.net/dickensas/vq25co4y/ – Dickens A S Mar 29 '20 at 13:32

1 Answers1

0

There are multiple ways to do it.

Method 1:

label {
  display: inline-block;
  width: 80px;
}
<html>
<body>

<h2>Radio Buttons</h2>

<form>
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male">
  <br>
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">
  <br>
  <label for="other">Other</label>
  <input type="radio" id="other" name="gender" value="other">
  
</form> 

</body>
</html>

Method 2:

div {
  display: flex;
  width: 90px;
  justify-content: space-between;
}
<html>
<body>

<h2>Radio Buttons</h2>

<form>
  <div>
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male">
  </div>
  <br>
  <div>
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female">
  </div>
  <br>
  <div>
  <label for="other">Other</label>
  <input type="radio" id="other" name="gender" value="other">
  </div>
</form> 

</body>
</html>
Arsalan Khattak
  • 768
  • 2
  • 8
  • 16