How to vertical align radio buttons
Question
So right now i have three radio buttons that are aligned horizontally by default, but instead i want them to be aligned vertically . How do i do that the correct way?
* { margin: 0; padding: 0; box-sizing: border-box; } .radio { display: inline-flex; align-items: center; cursor: pointer; margin-right: 10px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href = "style.css"> <title>Document</title> </head> <body> <h1>Custom Radio Button</h1> <label for="myRadioId" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input"> Mercedes Benz </label> <label for="myRadioId2" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input"> BMW </label> <label for="myRadioId3" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input"> Volkswagen </label> </body> </html>
3 answers
solution1
1 2020-11-24 07:55:49
Replace inline-flex with flex
* { margin: 0; padding: 0; box-sizing: border-box; } .radio { display: flex; align-items: center; cursor: pointer; margin-right: 10px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href = "style.css"> <title>Document</title> </head> <body> <h1>Custom Radio Button</h1> <label for="myRadioId" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input"> Mercedes Benz </label> <label for="myRadioId2" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input"> BMW </label> <label for="myRadioId3" class = "radio"> <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input"> Volkswagen </label> </body> </html>
solution2
0 2020-11-24 08:00:28
Instead of display: inline-flex; use display: table; in CSS.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.radio {
display: table;
align-items: center;
cursor: pointer;
margin-right: 10px;
}
solution3
0 2020-11-24 08:15:31
You can also use display:block; or display:flex; (as mentioned in the answer list).
Try to avoid
radioas selector class name since it is a keyword and it is not good way to use in that way.
fiddle to playaround.
* { margin: 0; padding: 0; box-sizing: border-box; } .radio { display: block; align-items: center; cursor: pointer; margin-left: 10px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <h1>Custom Radio Button</h1> <label for="myRadioId" class="radio"> <input type = "radio" name = "myRadioField" id="myRadioId" class = "radio__input"> Mercedes Benz </label> <label for="myRadioId2" class="radio"> <input type = "radio" name = "myRadioField" id="myRadioId2" class = "radio__input"> BMW </label> <label for="myRadioId3" class="radio"> <input type = "radio" name = "myRadioField" id="myRadioId3" class = "radio__input"> Volkswagen </label> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to align radio buttons?
How to align radio buttons and their labels?
How to align radio buttons and labels?
How to nest and vertical align Kendo radio buttons inside Bootstrap grid and form?
How to align radio buttons horizontally below labels
How to align two radio buttons horizontally in Ionic 3
How to center and align stacked radio buttons
How to align radio buttons when using div?
How to align radio buttons with text to the left?
How do I vertically align radio buttons?
Related Tags