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.
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.
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.
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!