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!

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

CSS

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

How to place the label right besides the checkbox?

Hi everyone,

I am trying to solve this for a while now.

input type="checkbox" id="html_news" value="html-news" name="user-age"> <label for="HTML news">HTML News</label>
<input type="checkbox" id="CSS News" value="CSS News" name="user-age"> <label for="under_13" class="light">CSS News</label>

So as in the subject, how do i get the label description right beside the checkbox? :) I tried different variations with display: inline / inline-block, but haven't solved it yet. Hope you can help me. Thanks in advance.

4 Answers

Joachim Larsen
Joachim Larsen
12,140 Points

Try to wrap the input tag within the label tag. When I tried this, they became inline with each other. (This also makes the label text clickable to select a checkbox or radio button), like this:

<div class="check"> <label for="HTML news"> <input type="checkbox" id="html_news" value="html-news" name="user-age"> HTML News </label> <div>

Joachim Larsen
Joachim Larsen
12,140 Points
Joachim Larsen
Joachim Larsen
12,140 Points

Hi there! :-)

Are you maybe talking about vertical alignment? You didn't provide any of your CSS, but have you tried the vertical-align property on your input? :-)

Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points

HTML:

<form>
 <div class="form">
  <div class="checkbox-container">
   <input type="checkbox" id="html_news" value="html-news" name="user-age"> <label for="HTML news">HTML News</label>
  </div>
  <div class="checkbox-container">
   <input type="checkbox" id="html_news" value="html-news" name="user-age"> <label for="HTML news">HTML News</label>
  </div>
 </div>
</form>

CSS(with flexbox):

.form{display:flex; flex-direction:column;}

.checkbox-container{display:flex;}

CSS(with normal CSS)[may conatain error]

.checkbox-container input[type="checkbox"]{display:inline-block;}
.checkbox-container label{display:inline;}

Designing forms are the main challenges.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Thanks Amrit,

Only in this stage i prefer not to use flexbox. I tried that earlier in comination with bootstrap and it seemed they seemed to give conflict. I don't know maybe I didn't understand it. For now i would like to learn everything from the basics.

I have put the normal css in my code, but i think it does contain an error. https://w.trhou.se/6ul5g2kfiu

Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points

Flexbox is new, it is still basic.