Need HELP with vertical align!

Good Sunday Afternoon,

I’m reading different sources about aligning radio-buttons; some do it in CSS and others in HTML - yet none of the code i tried worked.

I want to align my buttons just like in the example for this challenge, from top to bottom, starting with my “easy” button.

I would be grateful for any help!


You can put them in an unordered list with list-style: none; to remove the bullet point things.

1 Like

Thanks! I actually want them to look vertically aligned just like this:

As your code is right now, putting them into an unordered list will make them look like this:


You will have to change the text alignment for the list if you don’t want them not in line vertically like that.

1 Like

Stressstressstress already covered this pretty much but to summarize:

I would put each of those input tags inside a list item tag and then give each list item a class (see below). This will allow you to change all of the list items at once. It will also make your life a whole lot easier if you add more radio or checkbox choices and give them the same class. The below example if from your codepen.

ul id=radiochoice style=“list-style: none;”

li class=radio
input id=“easy” type=“radio” name=“easy-moderate-hard” easy
li class=radio
input id=“moderate” type=“radio” name=“easy-moderate-hard” moderate
li class=radio
input id=“hard” type=“radio” name=“easy-moderate-hard” hard

.radio {
text-align: left;

Hope that helps!

1 Like

Thank You for your follow-up!

What i am trying to achieve is the same template as in the Survey Form example they give:

So what i want to do is to ask a question, and the user has to click in the circle of her/his choice.

For now i just want to have my circles vertically aligned, and not horizontally laid out by default:


define the width of the ul, then, set a class to the li and display:block it, and set it to align:left

ul {
ul li {

right now, what you did was use flex, and it is not display very well in small devices.