Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Choosing Options Radio Buttons

Kornel L
Kornel L
4,368 Points

Radio buttons and description of it appears in the browser in block instead of inline. Why?

<label>Age: </label>

<input type="radio" id="under_13" value="under_13" name="user_age"><label for="under_13" class="lignt">Under 13</label><br>

<input type="radio" id="over_13" value="over_13" name="user_age"><label for="over_13" class="lignt">13 or over</label>

6 Answers

Doug Hantke
Doug Hantke
10,018 Points

I'm not sure what exactly you're talking about, but I'm assuming you are wondering why they are laid out vertically instead of side-by-side?

The <br> tag is a line-break and pushing the second radio button down.

Maybe you've commented out the CSS file path or something and that's why the styling is not being applied to the HTML file. It's the default layout that you're seeing in the browser. Hope that helps.

Happy Coding !!!

You're right David.

Kornel L
Kornel L
4,368 Points

Thanks for replying @Doug Hantke. This is how it appears in the browser.

Age:

o

Under 13

o

13 or over

My question is why is it this way?

Age:

o Under 13

o 13 or over

Thank you!

Doug Hantke
Doug Hantke
10,018 Points

My browser is showing it as this:

Age: o Under 13

o 13 or over

Which is how it will appear because of the line break in the code. Otherwise it would all be inline.

Kornel L
Kornel L
4,368 Points

Right that's how it is in the tutorial. My problem is the text 'under 13' is under the radio button not next to it like it should be same problem with '13 or over'. Each text should be next to it's own radio button on the same line, but they are not. So instead of two lines I have four.

Radio button.

under 13

radio button

13 and over

I reedited my previous post to make it visually correct if that helps.

Doug Hantke
Doug Hantke
10,018 Points

Do you have any CSS running that would be changing the format?

David Olson
David Olson
8,690 Points

You spelled the class name wrong. It should read "light" and the block setting is tied to that class.