Need HELP with vertical align!

General
1

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.

https://codepen.io/Philip_B/pen/zgBNjm

I would be grateful for any help!

Phil

2

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

1 Like
3

Thanks! I actually want them to look vertically aligned just like this:
22%20PM

4

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

image

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
5

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.

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

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

CSS
.radio {
text-align: left;
}

Hope that helps!

1 Like
6

Thank You for your follow-up!

What i am trying to achieve is the same template as in the Survey Form example they give: https://codepen.io/freeCodeCamp/full/VPaoNP

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: https://codepen.io/Philip_B/pen/zgBNjm

Phil

7

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

ul {
list-style:none;
}
ul li {
display:block;
text-align:left;
}

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