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

Jeriah Bowers
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points
Posted by Jeriah Bowers
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points

HTML Forms

Ok, so I'm creating a form as part of my project and I've wrote all the HTML.. Only problem is idk how to get all the checkbox input elements on the same line as the label. I know it's with CSS some how and I've used everything I could think of. Thank you in advance.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
       <h1 id="title">The Code Review</h1>
        <div id="wrapper">
          <header>
            <h2>Signup for our newsletter</h2>
            <p>Get the latest news on how your code is doing right in your inbox.</p>
          </header> <!-End Main Header-->
        <hr>

        <h2 id="formTitle">Contact Information</h2>   
        <form action="index.html" method="POST">
            <label for="name">Full Name</label>
            <input type="text" id="name" name="user_name">

            <label for="email">Email Address</label>
            <input type="email" id="email" name="user_email">

            <label for="phone">Phone Number</label>
            <input type="tel" id="phone" name="user_phone">

            <label for="address">Street Address</label>
            <input type="text" id="address" name="user_address">

            <label for="city">City</label>
            <input type="text" id="city" name="user_city">

            <label for="state">State</label>
            <select id="state" name="user_state">
                <option>Janurary</option>
                <option>Feburary</option>
                <option>March</option>
                <option>April</option>
                <option>May</option>
                <option>June</option>
                <option>July</option>
                <option>August</option>
                <option>September</option>
                <option>October</option>
                <option>November</option>
                <option>December</option>
            </select>

            <label for="zipcode">Zip Code</label>
            <input type="text" id="zipcode" name="user_zip">
           <hr>

            <h2>Newsletter</h2>
            <p>Select the newsletter you would like to recieve.</p>

            <label for="htmlNews">HTML News</label>
            <input type="checkbox" id="htmlNews">

            <label for="cssNews">CSS News</label>
            <input type="checkbox" id="cssNews">

            <label for="jsNews">JavaScript News</label>
            <input type="checkbox" id="jsNews">

            <p>Newsletter format</p>

            <label for="html">HTML</label>
            <input type="checkbox" id="html">

            <label for="plainText">Plain Text</label>
            <input type="checkbox" id="plainText">

            <label for="topics">Other topics you'd like to hear about.</label>
            <textarea id="topics" name="other_topics"></textarea>

            <button type="submit">Sign Up</button>
        </form>
      </div>
   </body>
</html>
Ross King
Ross King
20,704 Points

Hi Jeriah,

Can you post your css code. The checkbox elements should be inline-block by default so I think you may have styled them in your css/main.css stylesheet.

Jeriah Bowers
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points
Jeriah Bowers
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points 
/*Base Styles*/

form input, form select, form textarea {
    display: block;
}

body {
    margin: 0;
}

#wrapper {
    max-width: 94%;
    margin: auto;
}

h2 {
    font-size: 1.8em;
}

p {
    font-size: 1.2em;
}

/*Header Styles*/

#title {
    margin: 0;
    padding: .6em 0;
    text-align: center;
    color: white;
    background: slategrey;
}

header {
    text-align: center;
}

/*Form Styling*/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

1 Answer

Ross King
Ross King
20,704 Points

Thanks for posting the CSS. You have declared all input elements to have a display of block. In order to display your checkboxes on the same line you can use the following code in your stylesheet:

/* CSS3 selector to target all checkboxes */
input[type="checkbox"] {
 display: inline-block;
}

This will now display all checkboxes on the same line as the labels.

If you only want one checkbox and label per line you can add a break in the html, see below:

<label for="htmlNews">HTML News</label>
<input type="checkbox" id="htmlNews"><br/>

<label for="cssNews">CSS News</label>
<input type="checkbox" id="cssNews"><br/>

<label for="jsNews">JavaScript News</label>
<input type="checkbox" id="jsNews"><br/>