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 Checkboxes

Posted by vamosrope14
vamosrope14
14,932 Points

How is Nick getting the labels for the buttons to appear on the side as opposed to below or above them?

.

Kevin Gates
Kevin Gates
15,053 Points
Kevin Gates
Kevin Gates
15,053 Points

Please share your source code and be sure to use the markdown cheatsheet below this input text area box so we can see your code with proper styling.

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

By default, input elements and label elements are displayed as inline.

<input type="checkbox" name="user_interest" id="development" value="development"><label for="development">Development</label>

This would present the label next to the input element on the same line if this is what you are referring to.

After the label, you can additionally add the <br> tag which will break onto a new line.

vamosrope14
vamosrope14
14,932 Points

Jamie Reardon Yeah but if the label was below or above input, would it not still appear inline by default?

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

I don't get what you mean, like I said, they are both inline elements be default. The only way that the label element would appear above or below the input element is either:

  1. the label or input element's display mode has changed to block to force the new line.
  2. there is a <br> tag after the input element and before the label to force a new line.

You can use the dev tools to inspect the elements and see if they are forcing a new line.

EDIT: The label element can still display: inline regards to the input element having a different display mode. The effect would still however be the label element being on a separate line to the input element if the input element has a display mode of block.