HELP! Having trouble with organizing radio/checkbox buttons

HTML-CSS
1

Hello!
I’ve been racking my brain and travelling all over google and the W3Cs website trying to find a solution to my radio button/checkbox problem. I’m trying to organize my buttons vertically (in a stack) just like the example given for the survey form project, but I can’t seem to get it to work. My buttons will fall in line but the labels don’t want to stay positioned next to them.

PLEASE HELP!!
Thank you very much

My codepen link is:

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

2

Try adding a <br> after each label in the checkboxes section. <br> is a line break. You might also remove flex from the label in css.

3

Thanks a bunch!
This works nicely

4

Whatever you do, don’t add <br> to force line breaks or spacing. That’s what CSS is for.
Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they each take up the full width.

5

Uh, that page doesn’t say not to use <br> elements. <br> are very commonly used in forms for presentation.

6

This was more the answer I was looking for. I figured it had to be worked out in CSS. The line breaks gave it a clean look but I can’t fine tune anything.

Thank you very much for the tip!

7

The line breaks don’t allow you to adjust your margins .

8

Which margins can’t be adjusted if you use linebreaks exactly?

Okay, another way you can get the break is to set the labels’ display to “block.”

9

I couldn’t adjust my margins for the checkboxes.

It worked out once I made a div class that had display: block in it. Then I applied that class for each checkbox. In that class, I was able to adjust margins (even though I didn’t really need to).

10

I’m glad you found something that worked for you. FYI, div defaults to block. I think all you had to do was set label to block, and then it would take up its own line, without having to enclose things in another set of divs.

Remember: inline only takes up the space it needs. block takes up a whole line. flex and grid are their own, unique, special animals!

1 Like
11

I really do appreciate the help!
Thank you very much :grinning: :grinning: :grinning: